template模板是如何编译的

一. template 模板是怎样通过 Compile 编译的

Vue.js通过编译将template 模板转换成渲染函数(render ) ，执行渲染函数就可以得到一个虚拟节点树
所以这个问题是在问怎么生成render函数

  • compile可以分成三个阶段

    1. parse 会用正则等方式将 template 模板中进行字符串解析，得到指令、class、style等数据，形成 AST（在计算机科学中，抽象语法树（abstract syntax tree或者缩写为AST）
    2. optimize 优化标记静态的（不需要修改的DOM）节点。diff算法更新时，会跳过静态节点，减少比较的过程，优化patch的性能
    3. generate 将AST生成render函数
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • Vue面试题
    （掌握）简单说下setTimeout(fn, 0)中的0代表的是什么？如果我想在vue实现此功能可以用什么方法代替...
    Enginner_XZ阅读 5,674评论 0赞 40
  • vue面试题
    （掌握）简单说下setTimeout(fn, 0)中的0代表的是什么？如果我想在vue实现此功能可以用什么方法代替...
    Grit_1024阅读 1,432评论 0赞 22
  • 中高级前端面试知识点汇总
    1.1、什么是HTML语义化？有什么好处？ 根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者...
    倾城一梦1123阅读 2,478评论 1赞 11
  • 【面试说】一年半前端 Bigo 一二三 面
    前言 笔者其实是三月份就面的 Bigo，当时工作经验算一年半多。之所以现在才发，其实是之前虽然总结了，但多半是自己...
    Gopal阅读 1,831评论 0赞 3
  • Vue 源码解析 - 模板编译
    [TOC] Vue 学习笔记 Vue 源码解析 - 主线流程 Vue 源码解析 - 模板编译 Vue 源码解析 -...
    Whyn阅读 960评论 0赞 0