平时使用模板时，可以在模板中使用变量、表达式或者指令等，这些语法在html中是不存在的，那vue中为什么可以实现？这就归功于模板编译功能。
模板编译的作用是生成渲染函数，通过执行渲染函数生成最新的vnode，最后根据vnode进行渲染。那么，如何将模板编译成渲染函数？
image
此过程可以分成两个步骤：先将模板解析成AST（abstract syntax tree,抽象语法树），然后使用AST生成渲染函数。
由于静态节点不需要总是重新渲染，所以生成AST之后，生成渲染函数之前这个阶段，需要做一个优化操作：遍历一遍AST，给所有静态节点做一个标记，这样在虚拟DOM中更新节点时，如果发现这个节点有这个标记，就不会重新渲染它。
所以，在大体逻辑上，模板编译分三部分内容：
1、将模板解析成AST
2、遍历AST标记静态节点
3、使用AST生成渲染函数
这三部分内容在模板编译中分别抽象出三个模块实现各自的功能：解析器、优化器和代码生成器。
image
概念 平时使用模板时，可以在模板中使用变量、表达式或者指令等，这些语法在html中是不存在的，那vue中为什么可以...
概念 平时使用模板时，可以在模板中使用变量、表达式或者指令等，这些语法在html中是不存在的，那vue中为什么可以...
Vue 源码解析3 模板编译 模板编译的主要目标是将模板（template）转为渲染函数（render） 模板编译...
Vue.js 源码剖析 - 模板编译和组件化 模板编译简介 模板编译主要目的是将模板(template)转换为渲染...
模板编译 模板编译的主要目的是将模板 (template) 转换为渲染函数 (render) vue-templa...
[TOC] Vue 学习笔记 Vue 源码解析 - 主线流程 Vue 源码解析 - 模板编译 Vue 源码解析 -...
[TOC] Vue 学习笔记 Vue 源码解析 - 主线流程 Vue 源码解析 - 模板编译 Vue 源码解析 -...
[TOC] Vue 学习笔记 Vue 源码解析 - 主线流程 Vue 源码解析 - 模板编译 Vue 源码解析 -...
[TOC] Vue 学习笔记 Vue 源码解析 - 主线流程 Vue 源码解析 - 模板编译 Vue 源码解析 -...
[TOC] Vue 学习笔记 Vue 源码解析 - 主线流程 Vue 源码解析 - 模板编译 Vue 源码解析 -...
本文标题：vue模板编译（原理篇）
本文链接：https://www.haomeiwen.com/subject/zxnhjhtx.html
网友评论