Vue是怎么把template模板编译成render函数的？

1、解析模板： 首先，Vue会解析模板字符串，将其转化为抽象语法树（AST）。AST是一个表示模板结构和内容的树状数据结构。

2、优化AST： 接下来，Vue会对AST进行优化处理，以提升渲染性能。这包括标记静态节点、静态属性和静态文本等。

3、生成渲染函数： 利用优化后的AST，Vue会生成渲染函数。渲染函数是一个JavaScript函数，它接收一个上下文对象作为参数，并返回一个虚拟DOM树（VNode）。

4、渲染虚拟DOM： 当执行渲染函数时，它将生成一个新的虚拟DOM树。如果之前已经存在真实的DOM树，Vue将通过比较新旧VNode来计算最小的更新操作并应用在真实DOM上，从而进行局部更新，提高效率。

5、生成DOM： 最后，Vue将根据最新的VNode生成真实的DOM元素，并将其插入到页面中，完成渲染。

Vue的编译过程通常在构建时（比如使用Vue CLI）或运行时的初始阶段完成，以便在实际渲染组件时获得更好的性能。这样一来，渲染函数会被缓存并重复使用，而不需要每次重新编译模板。

Vue还可以使用render函数直接编写组件而不依赖于模板。这种情况下，手动编写的render函数会跳过模板解析和优化的步骤，直接生成渲染函数并进行渲染。这种方式可以在需要更高级别的动态和灵活性时使用。