vue 快速入门系列 —

其他章节请看：

vue 快速入门系列

模板

前面提到 vue 中的虚拟 dom 主要做两件事：

提供与真实节点对应的 vNode
新旧 vNode 对比，寻找差异，然后更新视图

①、vNode 从何而来？

前面也说了声明式框架只需要我们描述状态与 dom 之间的映射关系。状态到视图的转换，框架会给我们做。

②、用什么描述状态与 dom 之间的映射关系？

Tip：jQuery 是命令式的框架，现代的 vue、react属于声明式框架。

简介

首先公布问题 ② 的答案：用模板描述状态与 dom 之间的映射关系。

于是我们知道这三者之间的关系：

graph LR
状态 --> 模板 --> dom

模板编译器

请先看一个模板的示例：

<span>Message: {{ msg }}</span>

<h1 v-if="awesome">Vue is awesome!</h1>

<ul id="example-1">

  <li v-for="item in items" :key="item.message">

    {{ item.message }}

  </li>

</ul>

v-if、v-for、{{}} 是什么？html 中根本不存在这些东西。

我们知道 javascript 代码只有 javascript 引擎认识，同理，模板也只有类似模板引擎的东西认识它。

在 vue 中，类似模板引擎的叫做模板编译器。通过模板编译器将模板编译成渲染函数，而执行渲染函数就会使用当前最新的状态生成一份 vnode。

graph LR
模板 -- 编译 --> 渲染函数 -- 执行 --> vNode

至此，问题 ① 的答案显而易见了，vNode 由渲染函数生成。

模板和虚拟 dom 所处位置

我们根据上文，能轻易的知道模板所处位置：

flowchart LR
状态 --> 模板
subgraph a[模板]
模板 -- 编译 --> 渲染函数 -- 执行 --> vNode
end
vNode --> 视图

在虚拟 dom 的作用中，我们知道虚拟 dom 所处位置：

flowchart LR
状态 --> a
subgraph a[虚拟 dom]
vNode
patch
end
a --> 视图

最后，我们将这两个图合并成一个即可：

flowchart LR
状态 --> 模板
subgraph a[模板]
模板 -- 编译 --> 渲染函数
end
渲染函数 -- 执行 --> b
subgraph b[虚拟 dom]
vNode
patch
end
b --> 视图

Tip: 将渲染函数指向虚拟 dom，是因为 vue 官网有这么一句话：“虚拟 DOM”是我们对由 Vue 组件树建立起来的整个 VNode 树的称呼

模板是如何编译成渲染函数，以及为什么执行渲染函数就可以生成 vNode？请继续看下文。

渲染函数

将模板编译成渲染函数，只需要 3 步：

解析器：将HTML字符串转换为 AST
- AST 就是一个普通的 javascript 对象，描述了该节点的信息以及子节点的信息，类似 vNode
优化器：遍历 AST，标记静态节点，用于提高性能
- <p>hello</p> 是静态节点，渲染之后不会再改变
- <p>{{hello}}</p> 不是静态节点，因为状态会影响它
生成器：使用 AST 生成渲染函数
- 执行渲染函数就会根据现在的状态生成一份虚拟 dom（vNode）

为什么是这 3 步？不重要，这只是一种算法而已。

Tip：倘若我们能理解这 3 步确实能将模板编译成渲染函数，而渲染函数执行后能生成 vNode。那么 vue 中模板这一部分，也算是入门了。

分析

我们采用最直接的方法，即运行一段代码，看看 AST 是什么？优化器做了什么？渲染函数是什么？渲染函数又是如何生成 vNode 的？

代码很简单，一个 html 页面，里面引入 vue.js，然后在 vue.js 中打上一个断点（输入 debugger），最后运行 test.html：

// test.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <script src='vue.js'></script>

</head>

<body>

<!-- 模板 -->

<div id='app'>

    <p title='testTitle' @click='say'>number: {{num}}</p>

</div>

<!-- /模板 -->

<script>

const app = new Vue({

    el: '#app',

    data: {

        num: 0

    },

    methods: {

      say(){

        this.num += 1;

      }

    }

})

</script>

</body>

</html>

// vue.js

// 打上断点（行{1}）

  var createCompiler = createCompilerCreator(function baseCompile (

    template,

    options

  ) {

    debugger // {1}

    // 解析器

    var ast = parse(template.trim(), options);

    if (options.optimize !== false) {

      // 优化器

      optimize(ast, options);

    }

    // 生成器

    var code = generate(ast, options);

    return {

      ast: ast,

      render: code.render,

      staticRenderFns: code.staticRenderFns

    }

  });

AST

执行完 var ast = parse(template.trim(), options);，ast 为：

// ast:

{

    "type":1,

    "tag":"div",

    "attrsList":[

        {

            "name":"id",

            "value":"app"

        }

    ],

    "attrsMap":{

        "id":"app"

    },

    "children":[

        {

            "type":1,

            "tag":"p",

            "attrsList":[

                {

                    "name":"title",

                    "value":"testTitle"

                },

                {

                    "name":"@click",

                    "value":"say"

                }

            ],

            "attrsMap":{

                "title":"testTitle",

                "@click":"say"

            },

            "children":[

                {

                    "type":2,

                    "expression":"'number: '+_s(num)",

                    "tokens":[

                        "number: ",

                        {

                            "@binding":"num"

                        }

                    ],

                    "text":"number: {{num}}"

                }

            ],

            "plain":false,

            "attrs":[

                {

                    "name":"title",

                    "value":"testTitle"

                }

            ],

            "hasBindings":true,

            "events":{

                "click":{

                    "value":"say"

                }

            }

        }

    ],

    "plain":false,

    "attrs":[

        {

            "name":"id",

            "value":"app"

        }

    ]

}

于是我们知道，AST 就是一个普通的 javascript 对象，类似虚拟节点或 dom Node，里面有节点的类型、属性、子节点等等。

优化器的作用

将 ast 交给优化器处理后（optimize(ast, options);），ast 为：

// 优化器：（在上一步的基础上增加 static 和 staticRoot 两个属性）

{

    "type":1,

    "tag":"div",

    "attrsList":[

        {

            "name":"id",

            "value":"app"

        }

    ],

    "attrsMap":{

        "id":"app"

    },

    "children":[

        {

            "type":1,

            "tag":"p",

            "attrsList":[

                {

                    "name":"title",

                    "value":"testTitle"

                },

                {

                    "name":"@click",

                    "value":"say"

                }

            ],

            "attrsMap":{

                "title":"testTitle",

                "@click":"say"

            },

            "children":[

                {

                    "type":2,

                    "expression":"'number: '+_s(num)",

                    "tokens":[

                        "number: ",

                        {

                            "@binding":"num"

                        }

                    ],

                    "text":"number: {{num}}",

                    "static":false

                }

            ],

            "plain":false,

            "attrs":[

                {

                    "name":"title",

                    "value":"testTitle"

                }

            ],

            "hasBindings":true,

            "events":{

                "click":{

                    "value":"say"

                }

            },

            "static":false,

            "staticRoot":false

        }

    ],

    "plain":false,

    "attrs":[

        {

            "name":"id",

            "value":"app"

        }

    ],

    "static":false,

    "staticRoot":false

}

优化器给 ast 增加 static 和 staticRoot 两个属性，用于标记静态节点。

生成器

接着将 ast 交给生成器处理（var code = generate(ast, options);），code 为：

// code

{"render":"with(this){return _c('div',{attrs:{\"id\":\"app\"}},[_c('p',{attrs:{\"title\":\"testTitle\"},on:{\"click\":say}},[_v(\"number: \"+_s(num))])])}","staticRenderFns":[]}

将 code.render 字符串格式化：

// code.render

with(this) {

    return _c(

        'div',

        {

            attrs: {

                "id": "app"

            }

        },

        [

            _c(

                'p',

                {

                    attrs: {

                        "title": "testTitle"

                    },

                    on: {

                        "click": say

                    }

                },

                [

                    _v("number: " + _s(num))

                ]

            )

        ]

    )

}

code.render 这个字符串导出到外界，会放到一个函数中，这个函数就是渲染函数。

不理解？没关系，我们先看另一个示例：

new Function ([arg1[, arg2[, ...argN]],] functionBody)

const obj = {name: 'ph'}

const code = `with(this){console.log('hello: ' + name)}`

const renderFunction = new Function(code)

renderFunction.call(obj)

// 等同于

const obj = {name: 'ph'}

function renderFunction(){

  with(this){console.log('hello: ' + name)}

}

renderFunction.call(obj) // hello: ph

这下理解了吧。我们将 code.render 指向的字符串导出到外界，外界利用 new Function() 创建渲染函数。

前面提到执行渲染函数会生成 vNode。看看 code.render 就能知晓，里面出现的 _v 和 _c，分别用于生成元素类型的 vNode 和文本类型的 vNode。请看相关源码：

// 创建文本类型的 vNode

target._v = createTextVNode;

function createTextVNode (val) {

    return new VNode(undefined, undefined, undefined, String(val))

}

// 创建元素类型的 vNode

vm._c = function (a, b, c, d) { return createElement(vm, a, b, c, d, false); };

function createElement (

    context,

    tag,

    data,

    children,

    normalizationType,

    alwaysNormalize

  ) {

    ...

    return _createElement(context, tag, data, children, normalizationType)

  }

Tip: 关于 vue 中解析器、优化器和生成器里面具体是如何实现的，本系列就不展开了。

其他章节请看：

vue 快速入门系列