vuejs源码之模版编译原理

之前我们说过虚拟dom，也就是虚拟dom拿到vnode后所做的事情，而模版编译是如何让虚拟dom拿到vnode。

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

将模版编译成渲染函数

将模版编译成渲染函数可以分为2个步骤，先将模版解析生成AST，也就是抽象语法树，然后再使用AST生成渲染函数。

由于静态节点不用重新渲染，所以生成AST的时候会给静态节点做一个标记，这样在虚拟DOM中更新节点时，如果发现有这个标记，就不会重新渲染它。

解析器

解析器的作用就是将模版解析生成AST。

在解析器内部有很多小解析器，其中包括过滤器解析器，文本解析器和html解析器。

在使用模版时，我们可以使用过滤器，而过滤器解析器的作用就是用来解析过滤器的。

文本解析器就是用来解析带变量的文本。

最重要的就是html解析器，它的作用就是解析模版，每当解析到html标签到开始位置，结束位置，文本或者注释时，都会触发钩子函数，然后将相关信息通过参数传递出来。

优化器

优化器的目标是遍历AST，检测出所有静态子树并给其打上标记。

代码生成器

这个是模版编译的最后一步，它的作用是将AST转换成渲染函数中的内容，这个内容可以称为代码字符串。

比如

    
1

生成后的代码字符串是下面这个样子。

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

里面通过generate函数实现的，源码是在下面这个位置。

生成后的代码字符串导出到外界使用，会将代码字符串放到函数里，这个函数叫做渲染函数。