怎么理解vue中的diff算法

97 阅读2分钟

怎么理解vue中的diff算法? 回答:1.diff算法是虚拟dom技术的必然产物,通过新旧虚拟dom作对比,将变化的地方更新在真实的dom上,另外,也需要diff高效地执行对比过程,从而降低时间复杂度为o(n)。

1.diff算法是虚拟dom技术的必然产物,通过新旧虚拟dom作对比,将变化的地方更新在真实的dom上,另外,也需要diff高效地执行对比过程,从而降低时间复杂度为0(n).

2.必要性:vue2.x中为了降低Watcher粒度,每个组件都有一个Watcher与之对应,只有引入diff才能精确找到发生变化的地方,所以需要diff。

3.vue中diff执行的时刻是组件实例执行其更新函数时,他会比对上一次渲染结果oldVnode和新的渲染结果newVnode,此过程称之为patch。

3.vue中diff执行的时刻是组件实例执行其更新函数时,他会比上一次渲染结果oldVnode和新的渲染结果newVnode,此过程称之为patch。

4.diff过程整体遵循深度优先,同层比较的策略;两个节点之间比较会根据他们是否拥有子节点或者文本节点做不同操作;比较两组子节点是算法的重点,首先假设头尾节点可能相同,做4次对比尝试,如果没有找到相同节点,才按照通用方式遍历查找,查找结束再按情况处理剩下的节点;借助key通常可以非常精确找到相同节点,因此整个patch过程非常高效。

4.diff过程整体遵循深度优先,同层比较的策略;两个节点之间比较会根据他们是否拥有子节点或者文本节点做不同操作;比较两组子节点是算法的重点,首先假设头尾节点可能相同,做4次对比尝试,如果没有找到相同节点,才按照通用方式遍历查找,查找结束再按情况处理剩下的节点(要么删除,要么新增);借助key通常可以非常精确找到相同节点,因此整个patch过程非常高效。