Vue源码学习之模板编译

1.什么是模板编译

1.为什么会有模板编译

之前说了Vue的虚拟DOM以及DOM-Diff算法，虚拟DOM必要存在条件是VNode，那么VNode是怎么产生的呢？就是通过模板编译，才产生的。

2.什么是模板编译

既然虚拟DOM是通过模板编译产生的，那么模板编译又是什么呢？

在Vue项目中有<template>标签，就类似于HTML的内容，我们称之为模板。

把<template>标签中，原生HMTL内容和非原生内容找出来，经过一系列的的逻辑处理生成渲染函数，这一过程称之为模板编译过程

2.如何模板编译

如何模板编译呢，在模板编译的的这个流程大概分为三步：

1.模板解析阶段

什么是模板解析呢？

模板解析就是将一堆模板字符串用正则等方式解析成抽象语法树AST。

这个大家可能就有疑惑了什么是抽象法术树AST了？

在维基百科中的解释大概是这样的：

在計算機科學中，抽象語法樹（Abstract Syntax Tree，AST），或簡稱語法樹（Syntax tree），是原始碼語法結構的一種抽象表示。它以樹狀的形式表現程式語言的語法結構，樹上的每個節點都表示原始碼中的一種結構。之所以說語法是「抽象」的，是因為這裡的語法並不會表示出真實語法中出現的每個細節。比如，嵌套括號被隱含在樹的結構中，並沒有以節點的形式呈現；而類似於 if-condition-then 這樣的條件跳轉語句，可以使用帶有三個分支的節點來表示。

和抽象語法樹相對的是具體語法樹（通常稱作分析樹）。一般的，在原始碼的翻譯和編譯過程中，語法分析器創建出分析樹，然後從分析樹生成AST。一旦AST被創建出來，在後續的處理過程中，比如語義分析階段，會添加一些信息。

初学HTML的时候我们了解到HTML的结构像一棵树，具体如下：

 而我们的Vue编译过程也是类似的，如下：

在Vue中，我们提供了一个解析器parse模块，通过parser来编译

在代码中 ，我们除了常规的HTML代码还有文本信息以及Vue的过滤器，这个时候Vue就给我们提供了三个解析器分别是：parseHTML，parseText，parseFilters

HTML解析器是主线，为主要的解析器，当我们解析的过程中如果碰到了文本信息，就会使用Text解析器，如果碰到了过滤器，就会使用Filters解析器。

2.优化阶段

讲解虚拟DOM的时候讲到过真实的DOM非常耗费性能，虚拟DOM可以减少性能的消耗。

在虚拟DOM中，有一种节点一旦首次渲染上了之后不管状态再怎么变化它都不会变了，这种节点叫做静态节点。

在优化阶段，我们会在AST中找出所有静态节点和静态根节点并打上标记，通过标记，我们在通过DOM-Diff算法的时候就可以不去计算他了，这样可以再一次减少性能的消耗

3.代码生成阶段

代码生成其实就是根据模板对应的抽象语法树AST生成一个函数供组件挂载时调用，通过调用这个函数就可以得到模板对应的虚拟DOM。

3.总结

模板编译的目的：把用户所写的模板转化成供Vue实例在挂载时可调用的render函数