概念

平时使用模板时,可以在模板中使用变量、表达式或者指令等,这些语法在html中是不存在的,那vue中为什么可以实现?这就归功于模板编译功能。
模板编译的作用是生成渲染函数,通过执行渲染函数生成最新的vnode,最后根据vnode进行渲染。那么,如何将模板编译成渲染函数?

vue模板编译(原理篇)

将模板编译成渲染函数

此过程可以分成两个步骤:先将模板解析成AST(abstract syntax tree,抽象语法树),然后使用AST生成渲染函数。
由于静态节点不需要总是重新渲染,所以生成AST之后,生成渲染函数之前这个阶段,需要做一个优化操作:遍历一遍AST,给所有静态节点做一个标记,这样在虚拟DOM中更新节点时,如果发现这个节点有这个标记,就不会重新渲染它。
所以,在大体逻辑上,模板编译分三部分内容:
1、将模板解析成AST
2、遍历AST标记静态节点
3、使用AST生成渲染函数
这三部分内容在模板编译中分别抽象出三个模块实现各自的功能:解析器、优化器和代码生成器。

vue模板编译(原理篇)

相关文章:

  • 2021-12-25
  • 2021-04-02
  • 2022-12-23
  • 2021-06-16
  • 2021-12-30
  • 2022-12-23
  • 2021-10-01
猜你喜欢
  • 2021-08-26
  • 2022-01-18
  • 2021-09-04
  • 2023-02-13
  • 2021-04-11
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案