Vue 中模板的编译过程概述

  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 函数
    在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_40599109/article/details/107645458