简述 Vue 中模板编译的过程

240 阅读1分钟

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 函数