VUE源码解析——模板编译底层原理，学习Vue内部是怎么把template模板编译成虚拟DOM,从而渲染出真实DOM

学习Vue内部是怎么把template模板编译成虚拟DOM,从而渲染出真实DOM

一、什么是模板编译？

把写在<template></template>标签中的类似于原生HTML的内容称之为模板。
在<template></template>标签中除了写一些原生HTML的标签，我们还会写一些变量插值，或者写一些Vue指令，这些东西都是在原生HTML语法中不存在的，不被接受的。render函数会将模板内容生成对应的VNode，VNode经过patch过程从而得到将要渲染的视图中的VNode，最后根据VNode创建真实的DOM节点并插入到视图中， 最终完成视图的渲染更新——模板编译过程。

二、整体渲染过程

三、模板编译内部流程

借助抽象语法树解析<template></template>标签中写的模板。

抽象语法树AST

抽象语法树（AbstractSyntaxTree，AST），或简称语法树（Syntax tree），是源代码语法结构的一种抽象表示。
将一堆字符串模板解析成抽象语法树AST后，我们就可以对其进行各种操作处理了，处理完后用处理后的AST来生成render函数。

1. 模板解析阶段：将一堆模板字符串用正则等方式解析成抽象语法树AST；
2. 优化阶段：遍历AST，找出其中的静态节点，并打上标记；
3. 代码生成阶段：将AST转换成渲染函数；

总结

good night