Vue 模板编译的过程

Vue 模板编译的过程

Vue中的模板编译就是将模板编译成render渲染函数
模板编写，便于阅读，便于交互，编写render函数比较复杂

编译过程

1. 入口： src/platforms/web/entry-runtime-with-compile.js
   如果有render函数，进行render调用，没有render，进行模板转换render函数
   调用createCompile函数，接收baseCompile函数

2. 将模板转换为ast语法树，描述代码结构
   使用optimize(ast,options)优化抽象语法树
   将语法树转换为字符串形式的 js 代码
   最后会返回createCompileToFunction函数，是整个模板编译的入口函数

3. createCompileToFunction函数执行
   首先定义一个cache对象，用来通过闭包缓存执行的结构
   返回了compileToFunctions函数
   判断是否有缓存的结构，如果有直接返回
   进行编译，调用compile函数，编译对象，字符串形式的 js 代码
   调用createFunction，将字符串形式转换为函数形式
   将结果缓存并返回生成的res对象

4. compile的执行过程
   1.compile接收template模板和options选项作为参数
   2.定义了合并options和存储编译错误和信息的数组
   3.如果options存在，进行options的合并
   4.核心：调用baseCompile，将模板编译成render函数，将错误信息放置到之前定义的数组
   5.返回compiled