vuejs中虚拟DOM及diff算法

虚拟DOM及diff算法

虚拟DOM（virtual dom）

• 用一个简单的对象去代替复杂的dom对象，存储了对应dom的一些重要参数，在改变don之前，会先比较相应虚拟dom的数据，如果需要改变，才会将改变应用到真实dom上

Diff算法（差异算法）

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

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

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

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