dom diff

dom diff：虚拟dom的对比算法

• 就是一个函数，称之为patch
• 把树形结构按照层级分解，只比较同级元素。
• 给列表结构的每个单元添加唯一的 key 属性，方便比较。
• patchs = patch（旧的虚拟dom， 新的虚拟dom）(对比新旧dom，找到更新dom的最小操作)
• patchs就是要运行的dom的最小操作

Vue中的diff算法是经过优化的：

• 只比较同一层级，不跨级比较
  
• 比较标签名，如果标签名不同，直接删除，不继续深度比较
  
• 如果标签名相同，看key是否相同，key相同就认为是相同节点，不进行深度比较
  
  例子：把虚拟dom想象成树形

<div :class="x">
    <span v-if="y">{string1}</span>
    <span>{string2}</span>
</div>

当数据变化时：

x从red变为green

dom diff发现：

• 标签类型没有变，只需要更新div对应的dom属性
• 子元素没变，不更新

当y从true变为false

dom diff发现：

• div没变，不用更新
• 子元素1标签没变，但是children变了，更新dom内容
• 子元素2不见了，删除对应的dom