虚拟DOM和diff算法

虚拟DOM

虚拟DOM的原理主要包含三部分：

1. 用js对象模拟真实DOM
2. diff算法：比较两个虚拟DOM树的差异
3. patch算法：将虚拟DOM间的差异更新到真实的DOM中

虚拟DOM的作用

• 用JS模拟DOM，避免频繁操作DOM带来的性能损耗，效率更高
• 可以实现跨平台

Diff算法的思路

触发流程：

1. 数据改变触发setter
2. 调用Dep.notify通知收集的所有Watcher
3. 调用Watcher.update进行视图更新

整体思想：

• 深度优先，同级比较
• 若父节点不相同，直接替换
• 若父节点相同，遍历子节点
  • 若两个节点是文本节点，则比较文本内容
  • 若旧节点有子节点，新节点没有，则删除所有子节点
  • 若旧节点没有子节点，新节点有，则插入所有子节点
  • 若二者都有子节点，遍历子节点进行比较

在遍历子节点时：

• 首先对于新旧序列的首尾节点分别进行四次比较
• 若四次比较都不匹配，则对新序列中的节点，在所有旧节点中遍历比较

使用v-for时key的作用

key是vue中VNode的唯一标记。有了key，diff操作可以更加准确和迅速：

• 准确：带key的列表节点发生移动、新增和删除时，可以避免重新渲染整个列表的情况，提高匹配的准确度
• 迅速：利用key的唯一性，可以生成map来获取节点，比遍历方式更快