Vue 源码 模板编译总结

一、compileToFunctions(template,...)

模板编译的入口函数，他的作用是先从缓存中加载编译好的render函数，如果缓存中没有找到加载编译好的render函数，就去调用compile(template,options)去编译

二、compile(template,options)

他的作用是第一个是合并options合并选项然后调用baseCompile(template.trim(),finalOptions)编译模板,compile函数的核心是合并选项真正进行处理的是baseCompile这个函数

三、baseCompile(template.trim(),finalOptions)

这个函数是接受了模板和合并后的所有选项完成了模板编译核心的三件事情，第一件 parse() 是把template转换成AST tree也就是抽象语法树，然后第二件事情optimize()用来优化抽象语法树，标记AST tree中的sub trees（标记抽象语法树中的静态根节点），检测到静态子树，设置为静态，不需要在每次重新渲染的时候重新生成节点 ，在patch的过程中会跳过静态子树。第三件事情generate() 是吧经过优化的AST tree生成字符串的js创建代码。当compile执行完毕后会回到编译的入口函数compileToFunctions(template,...)

四、compileToFunctions(template,...)

他的里面会把生成的字符串js代码转换成函数的形式，调用createFunction，最后当render和staticRenderFns初始化完毕后，会挂载到Vue实例上的options选项上