Vue2 Diff

143 阅读1分钟
  1. diff算法是虚拟DOM技术的必然产物:通过新旧虚拟DOM作对比(即diff),将变化的地方更新在真实DOM上;另外,也需要diff高效的执行对比过程,从而降低时间复杂度为O(n)。
  2. vue2.x中为了降低watcher的颗粒度,每个组件只有一个watcher与之对应,只有引入diff才能精确找到变化的地方。
  3. vue中diff的执行时刻是组件实例执行其更新函数时,它会把上一次渲染结果的oldVnode和新渲染的newVnode进行对比,此过程称为patch。
  4. diff过程整体遵循的是深度优先和同层比较的策略;两个节点之间比较会根据它们是否拥有子节点或者文本节点做不同操作;比较两组子节点是算法的重点,首先会进行双方首尾、首首、尾尾的四次比较,如果没有找到相同节点才按照通用方式遍历查找,查找结束再按情况处理剩下的节点;借助key通常可以非常精准找到相同的节点。因此整个patch的过程非常高效。