组件化开发 复用性

将template里的组件编译成虚拟dom

parse变成AST抽象语法树 -> optimize优化，标记静态节点 -> generate生成渲染函数

在Vue中，模板（Template）编译是将Vue模板转换为可执行的JavaScript渲染函数的过程。Vue的编译过程包括以下几个步骤：

解析：

Vue首先会将模板解析为抽象语法树（AST）。
解析器会遍历模板的每个标签、属性和文本节点，并将它们转换为AST节点，以便后续处理。
静态分析：

在编译过程中，Vue会对模板进行静态分析，确定模板中的静态内容和动态内容。
静态内容是在渲染过程中不会改变的部分，可以被静态提升和缓存，以提高性能。
优化：

编译器会对AST进行优化处理，包括标记静态节点、静态属性和静态事件处理器等。
优化的目的是为了减少运行时的渲染开销，提高渲染性能。
代码生成：

最后，编译器会根据优化后的AST生成渲染函数。
渲染函数是一个普通的JavaScript函数，它接收一个参数（渲染上下文）并返回虚拟DOM树（VNode）。
渲染函数负责将虚拟DOM转换为实际的DOM，并进行渲染。
Vue的模板编译过程在Vue实例的创建阶段完成，编译后的渲染函数被用于渲染组件的初始状态和动态更新。通过将模板编译为渲染函数，Vue可以更高效地更新视图、处理数据绑定和响应式更新。

总结来说，Vue的模板编译将模板转换为渲染函数的过程，包括解析、静态分析、优化和代码生成。这个过程将模板转换为可执行的JavaScript代码，用于生成和更新组件的视图。