从模板到真实 DOM 渲染的过程,中间有一个环节是把模板编译成 render
函数,这个过程我们把它称作编译。
Vue.js 提供了 2 个版本,一个是 Runtime + Compiler 的,一个是 Runtime only 的,前者是包含编译代码的,可以把编译过程放在运行时做,后者是不包含编译代码的,需要借助 webpack 的 vue-loader 事先把模板编译成 render
函数。
对编译过程的了解会让我们对 Vue 的指令、内置组件等有更好的理解。不过由于编译的过程是一个相对复杂的过程,我们只要求理解整体的流程、输入和输出即可,对于细节我们不必抠太细。
核心编译流程
我们将整个 Vue 的编译流程简化为如下三个核心步骤,分别是:
parse -> optimize -> codeGen
Parse 的目标是把 template 模板字符串转换成 AST 树(它是一种用 JavaScript 对象的形式来描述整个模板)。整个 parse 的过程是利用正则表达式顺序解析模板,当解析到开始标签、闭合标签、文本的时候都会分别执行对应的回调函数,来达到构造 AST 树的目的。