【Vue原理】Compile - 源码版 之 generate 节点拼接

写文章不容易，点个赞呗兄弟


专注 Vue 源码分享，文章分为白话版和 源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧
研究基于 Vue版本 【2.5.17】

如果你觉得排版难看，请点击 下面链接 或者 拉到 下面关注公众号也可以吧

【Vue原理】Compile - 源码版 之 generate 节点拼接

终于走到了 Vue 渲染三巨头的最后一步了，那就是 generate，反正文章已经写完了，干脆早点发完，反正这部分内容大家也不会马上看哈哈

或者先看白话版好了
Compile - 白话版

然后，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 等是原封不动的哈哈，可是直接照抄

---

最后

鉴于本人能力有限，难免会有疏漏错误的地方，请大家多多包涵，如果有任何描述不当的地方，欢迎后台联系本人，有重谢