Vue2 的虚拟 DOM diff 算法是一种高效的算法,用于比较新旧两个虚拟 DOM 树,找出差异并更新到真实 DOM 上。这个算法的核心在于尽量减少不必要的 DOM 操作,提高性能。
虚拟dom:把DOM数据化,先通过不断地操作数据,最后才把数据更新到dom上
updateChildren方法:
- 头头比对:比较旧子节点数组的头部节点和新子节点数组的头部节点,如果它们是相同的(通过
sameVnode
判断),则更新并移动指针。 - 尾尾比对:比较旧子节点数组的尾部节点和新子节点数组的尾部节点,如果相同则更新并移动指针。
- 头尾比对:如果头部节点和尾部节点相同,进行更新并移动 DOM 元素。
- 尾头比对:如果尾部节点和头部节点相同,进行更新并移动 DOM 元素。
- 找不到相同节点:如果以上比对都不满足,说明新的子节点在旧的子节点数组中不存在,这时会为新的子节点创建一个 DOM 元素,并插入到适当的位置。