vuejs中虚拟DOM及diff算法

vuejs中虚拟DOM及diff算法

虚拟DOM及diff算法

虚拟DOM（virtual dom）

• Vue将模板编译成虚拟DOM渲染函数。结合Vue自带的响应系统，在状态改变时，Vue能够智能地计算出重新渲染组件的最小代价并应到DOM操作上。

Diff算法（差异算法）

• Diff算法（差异算法）：可以用新渲染的对象树去和旧的树进行对比，记录这两棵树差异，记录下来的不同就是我们需要对页面真正的DOM操作，然后把它们应用在真正的DOM树上，页面就变更了，这样就可以做到：视图的结构确实是整个全新渲染了，但是最后操作DOM的时候确实只变更有不同的地方

实现：
1、 用javascript对象结构表示DOM树到的结构，然后用这个树构建一个真正的DOM树，插到文档当中
2、 当状态变更的时候，重新构造一棵新的树和旧的树进行比较，记录两棵树差异
3、 把2所记录的差异应用到步骤1所构建的真正的DOM树上，视图就更新了

新DOM  vs   旧DOM   -----》对比差异-----》差异DOM------更新---》真实DOM------》视图更新

比较DOM树差异只会在同级比较。减少空间复杂度