深入浅出Vue.js(三) 模板编译

模板编译

在底层实现上,vue.js会将模板编译成虚拟DOM渲染函数。当应用内部的状态发生变化时,vue.js会结合响应式系统,找出最小数量的组件进行重新渲染以及最少量地进行DOM操作。

平时使用模板时,可以在模板中使用一些变量来填充模板,还可以在模板中使用JavaScript表达式,又或者使用一些指令等。这些功能在HTML语法中是不存在的,那么为什么在vue.js的模板中就可以使用很灵活的语法呢?这就多亏了模板编译赋予了模板强大的功能。

模板编译的主要目标就是生成渲染函数,而渲染函数的作用是每次执行它,它都会使用当前最新的状态生成一份新的vnode,然后使用这个vnode进行渲染。

将模板编译成渲染函数

将模板编译成渲染函数可以分为两个步骤:先将模板解析成AST(Abstract Syntax Tree,抽象语法树),然后再使用AST生成渲染函数。

注:由于静态节点不需要总是重新渲染,所以在生成AST之后,生成渲染函数之前这个阶段,需要做一个操作,那就是遍历一遍AST,给所有静态节点做一个标记,这样在虚拟DOM中更新节点时,如果发现节点有这个标记,就不会重新渲染。

  • 将模板解析为AST
  • 遍历AST标记静态节点
  • 使用AST生成渲染函数

这三部分内容在模板编译中分别抽象出来三个模块来实现各自的功能,分别是:解析器、优化器、代码生成器。

AST,它只是用JavaScript中的对象来描述一个节点,一个对象表示一个节点,对象中的属性用来保存节点所需的各种数据。

未完待续...

猜你喜欢

转载自www.cnblogs.com/zhenjianyu/p/13160240.html