【Vue面面观】你怎么理解vue中的diff算法?

你怎么理解vue中的diff算法?

源码分析1:必要性,lifecycle.js--mountComponent()

vue中一个组件一个watcher实例,而组件中可能存在很多个data中的key的使用,为了精确地知道更新过程中到底哪里发生了变化,必须使用diff算法

源码分析2:执行方式,patch.js--patchVnode()

patchVnode是diff发生的地方,整体方案:深度优先,同层比较

源码分析3:高效性,patch.js--updateChildren()

算法优化点,先首位判断,再顺序判断更新

结论(WWWH)

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

2.vue2.x中为了降低Watcher粒度,每个组件只有一个Watcher与之对应,只有引入diff才能精确找到发生变化的地方。(why)

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

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

猜你喜欢

转载自www.cnblogs.com/danker/p/12966117.html