虚拟DOM和抽象语法树

Posted 2023-03-20

参考技术A 1. 虚拟DOM其实就是一个普通的JS对象，是为了提高页面渲染的性能。

虚拟DOM的解决方式是，通过状态生产一个虚拟状态Dom,然后根据虚拟节点进行渲染，假如是首次渲染的就会直接渲染，但是二次往后的话就是进行虚拟状态树的对比，只更新不同的地方。

2. 换成AST的是Vue模板，Vue需要根据模版去处理各种插值、指令；

生成虚拟DOM的是最终要展示在页面上的内容的对象描述，Vue每次需要通过Diff算法对比新旧虚拟DOM的差异；

固定模版生成的AST是不变的，虚拟DOM是不断变化、需要进行差异对比的（数据等会变）。

  template --> 抽象语法树 --> render(h) --> 虚拟DOM-->UI

3. 抽象语法树的终点是渲染函数（h函数）。

渲染函数（h函数）,它既是AST的产物，也是vnode(虚拟节点)的起源。h函数里面是不含指令的。

抽象语法树不会进行diff算法的并且抽象语法树不会直接生成虚拟节点，抽象语法树最终生成的是渲染函数的

参考 https://zhuanlan.zhihu.com/p/111715881