深入浅出Vue.js阅读——模板编译原理——模板编译

模板编译

  Vue.js提供了模板语法，允许我们声明式的描述状态和DOM之间的绑定关系，然后通过模板来生成真实的DOM并将其呈现在用户界面上。
  在底层实现上，Vue.js会将模板编译成虚拟DOM渲染函数。

1. 概念

  模板编译的主要目的就是生成渲染函数。而渲染函数的作用是每次执行它，它就会使用当前最新的状态生成一份新的vnode，然后使用这个vnode进行渲染。

2. 将模板编译成渲染函数

  在大体逻辑上，模板编译分三部分：

1. 将模板解析为AST
2. 遍历AST标记静态节点
3. 使用AST生成渲染函数

  这三部分内容在模板编译中分别抽象出三个模块来实现各自的功能，分别是：

• 解析器
• 优化器
• 代码生成器

1. 解析器

  解析器的作用就是将模板解析成AST。
  在解析器内部分成了过滤解析器、文本解析器、HTML解析器等，然后通过一条主线将这些解析器组装在一起。
  在使用模板的时候，我们可以在其中使用过滤器，而过滤器解析器的作用就是用来解析过滤器的。
  文本解析器的作用就是用来解析带变量的文本。
带变量的文本：

Hello{{name}}

  不带变量的文本是一段纯文本，不需要使用文本解析器来解析。
  HTML解析器是解析器中最核心的模块，它的作用就是解析模板，每当解析到HTML标签的开始位置、结束位置、文本或者注释时，都会触发钩子函数，然后将相关信息通过参数传递出来。
  主线上做的事就是监听HTML解析器。每当触发钩子函数时，就生成一个对应的AST节点。在生成AST节点之前，会根据类型使用不同的方式生成不同的AST。

2. 优化器

  优化器的目的是遍历AST，检测出所有静态子节点树(永远都不会发生变化的DOM节点)并给其打标记。
  当AST中的静态子树被打上标记后，每次重新渲染时，就不需要为打上标记的静态节点创建新的虚拟节点，而是直接克隆已存在的虚拟节点。在虚拟DOM的更新操作中，如果发现两个节点是同一个节点，正常情况下会对这两个节点进行更新，但是这两个节点是静态节点，则直接可以跳过更新节点的流程。
  优化器的主要作用就是避免一些无用共来提升性能。

3. 代码生成器

  代码生成器是模板编译的最后一步，它的作用是将AST转换成渲染函数中的内容，这个内容可以称为"代码字符串"。
例子：
一个简单的模板：

<p title="mgd" @click="c"></p>

生成后的代码字符串是：

with(this){return _c('p',{attrs:{"title":"mgd"},on:{"click":c}},[_v("1")])}

格式化后是：

with(this){
    return _c('p',
        {
            attrs:{"title":"mgd"},
            on:{"click":c},
        },
        [_v("1")]
    )
}

  这样一个代码字符串最终导出到外界使用时，会将代码字符串放到函数里，这个函数叫做渲染函数。
  当渲染函数被导出到外界后，模板编译的任务就完成了。
如何将代码字符串放到函数里？

const code = `with(this){return 'Hello mgd'}`
const hello = new Function(code)

hello()

  渲染函数的作用是创建vnode。渲染函数之所以可以生成vnode，是因为代码字符串中会有很多函数调用，这些函数是虚拟DOM提供的创建vnode的方法。