【Vue原理】Compile - 源码版 之 generate 节点拼接
【Vue原理】Compile - 源码版 之 generate 节点拼接
写文章不容易，点个赞呗兄弟 专注 Vue 源码分享，文章分为白话版和 源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧
研究基于 Vue版本 【2.5.17】
如果你觉得排版难看，请点击 下面链接 或者 拉到 下面关注公众号也可以吧
【Vue原理】Compile - 源码版 之 generate 节点拼接
终于走到了 Vue 渲染三巨头的最后一步了，那就是 generate，反正文章已经写完了，干脆早点发完，反正这部分内容大家也不会马上看哈哈
或者先看白话版好了
然后，generate的作用就是，解析 parse 生成的 ast 节点，拼接成字符串，而这个字符串，是可以被转化成函数执行的。函数执行后，会生成对应的 Vnode
Vnode 就是Vue 页面的基础，我们就可以根据他完成DOM 的创建和更新了
比如这样
ast
{
tag:"div",
children:[],
attrsList:[{
name:111
}]
}
拼接成函数
"_c('div', { attrs:{ name:111 } }, [])"
转成函数
new Function(传入上面的字符串)
生成 Vnode
{
tag: "div",
data:{
attrs: {name: "111"}
},
children: undefined
}本文概览
本文主要讲的是如果去把 生成好的 ast 拼接成 函数字符串（跟上面那个转换一样），而 ast 分为很多种，而每一种的拼接方式都不一样，我们会针对每一种方式来详细列出来
下面将会讲这么多种类型节点的拼接
静态节点，v-for 节点，v-if 节点，slot 节点，组件节点，子节点 等的拼接，内容较多却不复杂，甚至有点有趣
那我们就来看看 generate 本身的函数源码先
比较简短
function generate(ast, options) {
var state = new CodegenState(options);
var code = ast ? genElement(ast, state) : '_c("div")';
return {
render: "with(this){ return " + code + "}",
//专门用于存放静态根节点的
staticRenderFns: state.staticRenderFns
}
}对上面出现的几个可能有点迷惑的东西解释一下
参数 options
options 是传入的一些判断函数或者指令函数，如下，不一一列举
{
expectHTML: true,
modules: modules$1,
directives: directives$1
....
};函数 CodegenState
给该实例初始化编译的状态，下面会有源码
函数 genElement
把 ast 转成字符串的 罪魁祸首
generate 返回值
你也看到了
1 返回 genElement 拼接后的字符串code
这就是作为 render 的主要形态，包了一层 with
render 会有一块内容专门说，with 就不多说了哈，就是为了为 render 绑定实例为上下文
2 返回 静态根节点 的 静态render
这是一个 数组，因为一个模板里面可能存在多个静态根节点，那么就要把这些静态根节点都转换成 render 字符串保存起来，就是保存在数组中
上面是静态根节点？简单就是说，第一静态，第二某一部分静态节点的最大祖宗，如下图
两个 span 就是 静态根节点，他们都是他们那个静态部分的最大祖宗，而 div 下 有 v-if 的子节点，所以 div 不是静态根节点
然后下面这个静态模板，解析得到 render 放到 staticRenderFns 是这样的
<div name="a">
<span>111</span>
</div>
staticRenderFns=[
`
with(this){
return _c('div',
{attrs:{"name":"a"}},[111])]
)
}
`
]而 staticRenderFns 也会在 render 模块下详细记录
CodegenState
初始化实例的编译状态
function CodegenState(options) {
this.options = options;
this.dataGenFns = [ klass$1.genData, style$1.genData];
this.directives = { on , bind, cloak, model,text ,html]
this.staticRenderFns = [];
};因为这个函数是给实例初始化一些属性的，看到很明显就是给实例添加上了很多属性，this.xxxx 什么的，那么我们就对 CodegenState 这个函数中添加的属性解释一下。
属性 dataGenFns
这个数组，存放的是两个函数
style$1.genData 处理 ast 中的 style ，包括动态静态的 style
klass$1.genData 处理 ast 中的 class ，包括动态静态的 class
比如
<div class="a" :class="aa"
style="height:0" :style="{width:0}">
</div>
解析成 ast
{
tag: "div",
type: 1,
staticStyle: "{"height":"0"}",
styleBinding: "{width:0}",
staticClass: ""a"",
classBinding: "name"
}
解析成字符串
`_c('div',{
staticClass:"a",
class:name,
staticStyle:{"height":"0"},
style:{width:0}
})
`
staticClass:"a",
class:name,
staticStyle:{"height":"0"},
style:{width:0}
})
`dataGenFns 会在后面拼接节点数据的时候调用到
属性 directives
这也是个数组，存放的是 Vue 自有指令的独属处理函数
包括以下几个指令的处理函数
v-on，绑定事件
v-bind，绑定属性
v-cloak，编译前隐藏DOM
v-model，双向绑定
v-text，插入文本
v-html，插入html
当你在模板中使用到以上的指令的时候，Vue 会调用相应的函数先进行处理
属性 staticRenderFns
一个数组，用来存放静态根节点的render 函数，上面有提到过一点
每个实例都独有这个属性，如果没有静态根节点就为空
比如下面这个模板，有两个静态根节点
然后在实例 的 staticRenderFns 中就存放两个 静态 render
那么我们现在就来看，generate 的重点函数，genElement
genElement
这是 ast 拼接成 字符串 的重点函数，主要是处理各种节点，并且拼接起来
静态节点，v-for 节点，v-if 节点，slot 节点，组件节点，子节点 等，有一些省略了
可以简单看看下面的源码
function genElement(el, state) {
if (
el.staticRoot && !el.staticProcessed
) {
return genStatic(el, state)
}
else if (
el.for && !el.forProcessed
) {
return genFor(el, state)
}
else if (
el.if && !el.ifProcessed
) {
return genIf(el, state)
}
else if (el.tag === 'slot') {
return genSlot(el, state)
}
else {
var code;
// 处理 is 绑定的组件
if (el.component) {
code = genComponent(el.component, el, state);
}
// 上面所有的解析完之后，会走到这一步
else {
// 当 el 不存在属性的时候，el.plain = true
var data = el.plain ? undefined : genData$2(el, state);
// 处理完父节点，遍历处理所有子节点
var children = genChildren(el, state);
code = `_c(
'${el.tag}'
${data ? ("," + data) : ''}
${children ? ("," + children) : ''}
)`
}
return code
}
}重点是其中的各种处理函数，通过各种条件来选择函数进行处理，并且会有一个 xxxProcessed 属性，作用是证明是否已经进行过 xxx 方面的处理了，比如forProcessed = true，证明已经拼接过他的 v-for 了
在相应的函数中，会被这个属性设置为 true，然后递归的时候，就不会再调用相应的函数
以上的各种函数中会调用 genElement，以便递归处理其他节点
genElement 按顺序处理自身各种类型的节点后，开始 genData$2 拼接节点的数据，比如 attr ，prop 那些，然后再使用 genChildren 处理 子节点
拼接节点数据会在独立一篇文章记录，内容很多
下面我们来一个个看其中涉及的节点处理函数
拼接静态节点
function genStatic(el, state) {
el.staticProcessed = true;
state.staticRenderFns.push(
"with(this){ return " + genElement(el, state) + "}"
);
return `
_m(${
state.staticRenderFns.length - 1
})
`
}太简单了，给一个模板看一下就可以了
处理完，存储静态render，并返回字符串 "_m(0)" , 很简短吼
意思就是获取 staticRenderFns 中的第一个值
其中的值，也是调用 genElement 得到的静态 render
拼接 vIf 节点
专门用于处理带有 v-if 的节点
function genIf(
el, state) {
el.ifProcessed = true; // 避免递归
return genIfConditions(
el.ifConditions.slice(),
state
)
}看到 parse 文章的，想必应该知道 el.ifCondition 是什么了吧
简单说一下吧，el.ifCondition 是用来存放条件节点的数组
什么叫条件节点啊？
比如 你有这样的模板
像 上面的 p，span，section 三个节点都是条件节点，不会直接存放到父节点的 children 中
因为并不是马上显示的
然后他们解析得到的 ast ，都会被存放到 p 节点的 ifCondition 中
像这样
{
tag:"div",
children:[{
tag:"p",
ifCondition:[{
exp: "isShow",
block: {..p 的 ast 节点}
},{
exp: "isShow==2",
block: {..span 的 ast 节点}
},{
exp: undefined,
block: {..section 的 ast 节点}
}]
}]
}el.ifCondition 就是把 这个数组复制一遍（我又学到了，之前我并不知道可以这么去复制数组）
然后传给 genIfCondition，看看源码
function genIfConditions(
conditions, state,
) {
// 当 没有条件的时候，就返回 _e ，意思是空节点
if (!conditions.length) {
return '_e()'
}
// 遍历一遍之后，就把条件剔除
var condition = conditions.shift();
if (condition.exp) {
return (
condition.exp + "?" +
genElement(condition.block,state) + ":" +
genIfConditions(conditions, state )
)
} else {
return genElement(condition.block,state)
}
}这个函数的作用呢，是这样的
1、按顺序处理 ifCondition 中的每一个节点，并且会移出数组
2、并且每一个节点使用 三元表达式 去拼接
3、递归调用 genIfConditions 去处理剩下的 ifCondition
按下面的模板来说明一下流程
第一轮
ifCondition = p，span,section
获取 ifCondition 第一个节点，也就是p，并移出 ifCondition 数组
此时 ifCondition = span,section
p 节点有表达式 isShow，需要三元表达式拼接，变成
" isShow ? _c('p') : genIfConditions( 剩下的 ifCondition )"第二轮
genIfConditions 同样获取第一个节点，span
此时 ifCondition = section
span 有表达式 isShow==2，需要拼接三元表达式，变成
" isShow ?
_c('p') :
( isShow==2 ? _c( 'span') : genIfConditions( 剩下的 ifCondition ) )"第三轮
genIfConditions 同样获取第一个节点，section
此时 ifCondition =
section 没有表达式，直接处理节点，拼接成
" isShow ?
_c('p') :
( isShow==2 ? _c( 'span') : _c( 'section') )"然后就处理完啦，上面的字符串，就是 genIf 处理后拼接上的字符串
接下来看是怎么拼接带有v-for 的指令的
拼接v-for 节点
function genFor(
el, state
) {
var exp = el.for;
var alias = el.alias;
var iterator1 = el.iterator1 ? ("," + el.iterator1 ) : '';
var iterator2 = el.iterator2 ? ("," + el.iterator2 ) : '';
el.forProcessed = true; // avoid recursion
return (
'_l (' + exp + ",function(" + alias + iterator1 + iterator2 + "){" +
"return " + genElement(el, state) +
'})'
)
}大家应该都可以看得懂的吧，给个例子
`_c('div', _l( arr ,function(item,index){ return _c('span') } )`就这样，v-for 就解析成了一个 _l 函数，这个函数会遍历 arr，遍历一遍，就生成一个节点
下面在看看是如何处理子节点的
拼接子节点
function genChildren(el, state) {
var children = el.children;
if (!children.length) return
return` [$ {
children.map(function(c) {
if (node.type === 1) {
return genElement(node, state)
}
return`_v($ {
text.type === 2
? text.expression
: ("'" + text.text + "'")
})`
}).join(','))
}]`
}同样的，这个函数也是很简单的吼
就是遍历所有子节点，逐个处理子节点，然后得到一个新的数组
1、当子节点 type ==1 时，说明是标签，那么就要 genElement 处理一遍
2、否则，就是文本节点
如果 type =2 ，那么是表达式文本，否则，就是普通文本
普通文本，需要左右两边加引号。表达式是个变量，需要在实例上获取，所以不用加双引号
举个例子
解析成字符串
`_c('div',[ _c('span') ,_c('section') ,_c('a') ])`拼接插槽
function genSlot(el, state) {
var slotName = el.slotName || '"default"';
var children = genChildren(el, state);
var res = `
_t( ${slotName} ,
${ children ? ("," + children) : ''}
)
`
var attrs =
el.attrs && "{" +
el.attrs.map(function(a) {
return camelize(a.name) + ":" + a.value;
}).join(',') +
"}";
if (attrs && !children) {
res += ",null";
}
// _t 的参数顺序是 slotName， children，attrs，bind
if (attrs) {
res += "," + attrs;
}
return res + ')'
}genSlot 主要是处理子节点 和 绑定在 slot 上的 attrs
属性 attrs 会逐个拼接成 xx:xx 的形式 ，合成一个新的数组，然后通过 逗号隔开成字符串
原 attrs = [
{ name:"a-a" ,value:"aaa"},
{ name:"b-b" ,value:"bbb"}
]
转换后，name 会变成驼峰
attrs = 'aA:"aaa", bB:"bbb"'看下例子，一个slot，绑定属性 a 作为 scope，并且有 span 作为默认内容
解析成这样
_c('div',[_t("default", [_c('span')] ,{a:aa} )] )然后剩最后一个了，解析组件的节点
拼接组件
function genComponent(componentName, el, state) {
var children = genChildren(el, state, true);
return `_c(
${componentName},
${genData$2(el, state)}
${children ? ("," + children) : ''}
)`
}其实，解析组件，就是把他先当做普通标签进行处理，在这里并没有做什么特殊的操作
但是这个方法是用来处理 【带有 is 属性】 的节点
否则 就不会存在 el.component 这个属性，就不会调用 genComponent
拼接成下面这样，而其中的 is 属性的拼接在 下篇文章 genData$2 中会有说明
`_c('div',[_c("test",{tag:"a"})])`那如果直接写组件名作为标签，是怎么处理？
也没有做什么特殊处理，具体看 genElement 最后那段
同样当做普通标签先解析
看个例子
解析成这样的字符串
`_c('div',[ _c('test', [_c('span')] )] )`走个流程
看了上面这么多的处理函数，各种函数处理后得到的字符串是相加的关系
然后现在用一个小例子来实现以下拼接步骤
1、先解析最外层 div，得到字符串
`_c( 'div' ` genChildren 开始解析子节点
2、处理 strong，这是一个静态根节点，genStatic 处理得到字符串
`_c( 'div' , [ _m(0) `3、处理 p 节点，genIf 处理拼接字符串
`_c( 'div' , [ _m(0) , isShow? _c(p) :_e() `4、处理 span 节点， genFor 拼接字符串
`_c( 'div' , [
_m(0) ,
isShow? _c(p) :_e() ,
_l(arr,function(item,index){return _c('span')})
`5、处理 test 组件节点，genComponent 拼接
`_c( 'div' , [
_m(0) ,
isShow? _c(p) :_e() ,
_l(arr,function(item,index){return _c('span')}),
_c('test')
`6、genChildren 处理完所有子节点拼接上末尾的括号得到
`_c( 'div' , [
_m(0) ,
isShow? _c(p) :_e() ,
_l(arr,function(item,index){return _c('span')}),
_c('test')
])
`然后整个genElement 流程就处理完了
上面得到的 字符串，只要转换成函数，就可以执行了，于是也就可以得到我们的 Vnode
感悟
有时你会想，看这个东西有什么用啊，其实你只做正常项目的话，你的确大可不必去看这部分的内容，但是如果你真的想胸有成竹，百分百掌握Vue，你就必须看，因为你可以做更多东西
比如之前接了个外包，要根据别人打包好的文件，去还原别人的源码！
难度之大之复杂，你也想得出来，不过幸好我看过源码，打包后的文件，模板全是 render 函数，所以我可以手动还原出来原始模板！
虽然我也可以写一个 反编译模板函数，但是工作量太大，没得想法了。还原的难度就在于 render 变成模板了，因为其他的什么 method 等是原封不动的哈哈，可是直接照抄
最后
鉴于本人能力有限，难免会有疏漏错误的地方，请大家多多包涵，如果有任何描述不当的地方，欢迎后台联系本人，有重谢
腾讯云开发者
