知识要点:
概览
在实例化Vue时,首先经过选项合并和数据初始化,最后进入挂载阶段。此阶段分为编译阶段和更新阶段。编译阶段将template编译为生成Vnode的render函数,核心是compile过程。更新阶段则将生成的虚拟Dom映射至真实Dom。接下来重点解析编译阶段。
编译原理
了解Vue编译过程前,先学习编译原理。编译器结构通常包含词法分析、语法分析、语义分析、中间代码生成、代码优化和目标代码生成。这些步骤对Vue的编译过程至关重要,如页面渲染、代码转换、Vue代码编译等。
编译过程
Vue编译过程由parse、optimize和generate三个阶段组成。parse生成抽象语法树(ast),optimize进行语法树优化,generate将语法树转化为生成Vnode的代码。实际操作以解析简单模板为例,通过ast表示模板字符串,便于后续操作。
编译入口
编译入口在$mount函数中,其定义在多个文件中。$mount进行不同处理以适应template的多种写法。编译模板的核心方法compileToFunctions在platforms文件夹下的src/compiler/index.js中。
函数科里化
Vue通过函数科里化将代码复用,将baseCompile和baseOptions分离传入,实现不同平台或端的代码封装。这样无需更改内部内容,便于平台间代码适应。
细节解析
baseOptions在platforms/web/compiler/options.js文件中定义,包含平台相关方法和属性。baseCompile是编译流程核心实现,compile函数在src/complier/create-compiler.js最内层完成。
创建编译函数
createCompileToFunctionFn将编译后的代码缓存,用于下次使用,同时将代码字符串转换为函数形式,生成render函数和静态渲染函数集合。
总结
本章从整体上介绍了Vue挂载过程和编译原理,解析了多次回调处理编译函数的原因。下章将结合源码深入学习Vue内部编译过程,了解template如何转换为生成Vnode的render函数。欲了解更多解析,点击这里查看。