vue template compiler模版解析模块源码解析

前言

尤雨溪在vue官方文档里对于vue这样定义：

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。

vue.js拥有自身定义的一套模版语法。相信大家一直对于vue的模版解析模块充满好奇。

本文会深入vue template compiler（模版解析器）源码来讲述vue.js的模版解析的过程。

在此之前，本文会带大家温习一下vue的模版语法。

vue模版语法

定义

官方对于vue模版语法的解释如下：

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。

在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量，你也可以不用模板，直接写渲染 (render) 函数，使用可选的 JSX 语法。

来自： https://cn.vuejs.org/v2/guide/syntax.html

vue的作者对于vue的模版的定义非常准确。

站在模版解析器的立场上，翻译一下这段话，大意如下：

1. vue的模版语法基于html语法。

   • vue拥抱HTML，vue模版语法符合HTML模版规范，是直接可以被浏览器自带的html解析器进行解析的，是可以直接在浏览器中运行的哦。

2. Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

   • vue会对于自身的模版语法进行解析为AST，并且会对AST树进行优化，会区分静态与非静态模版，静态模版片段不会被重新渲染。这是vue的模版解析器所做的性能优化。

3. 你也可以不用模板，直接写渲染 (render) 函数。

   • 模版解析器支持多种输入：template模版，渲染函数等。

语法

vue的模版语法包含插值和指令两种。

插值

使用{ {}}包含的片段作为插值定义，支持javascript单表达式。

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

指令

使用v-开头的属性定义或者@，:作为缩写的属性定义作为指令定义。

<p v-if="seen">现在你看到我了</p>
<a v-bind:href="url">...</a>
<a v-on:click="doSomething">...</a>
<a @click="doSomething">...</a>
<a :href="url">...</a>

vue template compiler模版解析器

现状

当前vue2.5.21版本，它的模版解析器都具有哪些能力，同时做了哪些优化呢？相信很多人还不是很清楚。

当前vue的模版解析器，设计者已经将它从vue中剥离出来，也就是说，它是一个独立的包，开发者是可以单独使用的。

我们可以通过

npm install vue-template-compiler

并引入到代码中，

const compiler = require('vue-templat