阅读 93

简述 Vue 中模板编译的过程

image.png

  1. 缓存公共的 mount 函数,并重写浏览器平台的 mount
  2. 判断是否传入了 render 函数,没有的话,是否传入了 template ,没有的话,则获取 el 节点的 outerHTML 作为 template
  3. 调用 baseCompile 函数
  4. 解析器(parse) 将模板字符串的模板编译转换成 AST 抽象语法树
  5. 优化器(optimize) - 对 AST 进行静态节点标记,主要用来做虚拟DOM的渲染优化
  6. 通过 generate 将 AST 抽象语法树转换为 render 函数的 js 字符串
  7. 将 render 函数 通过 createFunction 函数 转换为 一个可以执行的函数
  8. 将 最后的 render 函数 挂载到 option 中
  9. 执行 公共的 mount 函数
文章分类
前端
文章标签