关于Vue编译原理这块的整体逻辑主要分为三步：
- 第一步将模版字符串转换成element ASTs(解析器)
- 第二步是对AST进行静态节点标记，主要用来做虚拟DOM的渲染优化(优化器)
- 第三步是使用element ASTs生成render函数代码字符串(代码生成器)
解析器
<div>
<p>{{name}}</p>
</div>
上面一个简单 的模版转换成element AST树形结构后是这样的：
{
tag: "div"
type: 1,
staticRoot: false,
static: false,
plain: true,
parent: undefined,
attrsList: [],
attrsMap: {},
children: [
{
tag: "p"
type: 1,
staticRoot: false,
static: false,
plain: true,
parent: {tag: "div", ...},
attrsList: [],
attrsMap: {},
children: [{
type: 2,
text: "{{name}}",
static: false,
expression: "_s(name)"
}]
}
]
}
我们可以看到上面的dom被解析成了解析器，它的原理主要是两部分内容，一部分是截取字符串，一部分是对截取的字符串做解析。
优化器
优化器的目的就是找出那些静态节点并打上标记，而静态节点指的是DOM不需要发生变化的节点，也就是里面都是静态标签和静态文本。
标记静态节点有两个好处：
- 一、每次重新渲染的时候不需要为静态节点创建新节点，也就是静态节点的解析器不需要重新创建
- 二、在Virtual DOM中patching的过程可以被跳过
优化器的实现原理主要分两步：
- 一、用递归的方式将静态节点添加static属性，用来标识是不是静态节点
- 二、标记所有静态根节点(子节点全是静态节点就是静态根节点)
代码生成器
代码生成器的作用是使用element ASTs生成render函数代码字符串。
使用本文开头举的例子中的模版生成后的AST来生成render后是这样的：
{
render: `with(this){return _c('div',[_c('p',[_v(_s(name))])])}`
}
格式化后是这样的：
with(this){
return _c(
'div',
[
_c(
'p',
[
_v(_s(name))
]
)
]
)
}
生成后的代码字符串中看到了有几个函数调用_c、_v、_s。
_c对应的是createElement，它的作用是创建一个元素。
1.第一个参数是一个HTML标签名
2.第二个参数是元素上使用的属性所对应的数据对象，可选项
3.第三个参数是children
_v的意思是创建一个文本节点。
_s是返回参数中的字符串。
代码生成器的总体逻辑其实就是使用element ASTs去递归，然后拼出这样的_c('div',[_c('p',[_v(_s(name))])]) 字符串。
总结
本篇文章我们说了 vue 对模板编译的整体流程分为三个部分：解析器（parser），优化器（optimizer）和代码生成器（code generator）。
解析器（parser）的作用是将 模板字符串 转换成 element ASTs。
优化器（optimizer）的作用是找出那些静态节点和静态根节点并打上标记。
代码生成器（code generator）的作用是使用 element ASTs 生成 render函数代码（generate render function code from element ASTs）。
用一张图来表示：
image.png
解析器（parser）的原理是一小段一小段的去截取字符串，然后维护一个 stack 用来保存DOM深度，每截取到一段标签的开始就 push 到 stack 中，当所有字符串都截取完之后也就解析出了一个完整的 AST。
优化器（optimizer）的原理是用递归的方式将所有节点打标记，表示是否是一个 静态节点，然后再次递归一遍把 静态根节点 也标记出来。
代码生成器（code generator）的原理也是通过递归去拼一个函数执行代码的字符串，递归的过程根据不同的节点类型调用不同的生成方法，如果发现是一颗元素节点就拼一个 _c(tagName, data, children) 的函数调用字符串，然后 data 和 children 也是使用 AST 中的属性去拼字符串。
如果 children 中还有 children 则递归去拼。
最后拼出一个完整的 render 函数代码。
问题
一、请问在模板编译的阶段，是不是就会对每个组件所使用的data或者computed值进行访问，从而创建新的Watcher进行订阅，然后对应的属性的dep就会收集这些watcher，从而实现更新的？
答：不是的，模板编译只是会把模板编译成渲染函数，只有在渲染函数被执行的时候才会对数据进行访问，而渲染函数是在watche实例中执行的，所以渲染函数中所使用到的所有数据，都会被同一个Watcher监听，当这些状态发生变化时，会通知这个Watcher，这个Watcher会触发VirtualDOM对组件进行渲染。一个组件的模板会被编译成一个渲染函数。每个组件有一个Watcher用来监听模板中所使用到的数据、当这些数据发生变化时，通过VirtualDOM进行更新组件的视图
网友评论