vue的diff算法?

简介: vue的diff算法?

是什么

diff 算法是一种通过同层的树节点进行比较的高效算法

其有两个特点:

比较只会在同层级进行, 不会跨层级比较
在diff比较的过程中,循环从两边向中间比较

比较方式

diff整体策略为:深度优先,同层比较

  • 比较只会在同层级进行, 不会跨层级比较
  • 比较的过程中,循环从两边向中间收拢

原理分析

Diff算法的步骤:

之后判断新旧两个节点是否为同类标签,如果不是同类标签就直接替换;如果是同类标签的话,进一步执行patchVnode()方法,在这个方法内部,也是需要先判断一下新旧虚拟节点是否相同,如果相等,就直接return;如果不相等就需要分情况来比对,比对的原则就是以新虚拟节点的结果为准,分为以下几种情况:

oldvnode和newvnode都有文本节点—执行—>用新的文本节点替换旧文本节点

oldvnode没有子节点,newvnode有子节点—执行—>添加新的子节点

oldvnode有子节点,newvnode没有子节点—执行—>删除旧的子节点

oldvnode和newvnode都有子节点—执行—>updateChildren()方法

首尾指针法

①依次比对,当比较成功后退出当前比较
    ②渲染结构以newVnode为准
    ③每次比较成功之后start点和end点向中间靠拢
    ④当新旧节点中有一个start点跑到end点右侧时终止比较
    ⑤如果都匹配不到,则旧虚拟DOM key只去比对新虚拟DOM的key值,
    如果key相同则复用,并移动到新虚拟DOM的位置

比对顺序:

  • 首先,旧虚拟节点的start和新虚拟节点的start做比对,如果没有比对成功,就用旧虚拟节点的start和新虚拟节点的end做比对。
  • 如果依旧没有比对成功,就用旧虚拟节点的end和新虚拟节点的start做比对,如果依旧没有比对成功,旧虚拟节点的end会和新虚拟节点的end做比对
  • 当比对成功,就退出当前比对,渲染结果会以新虚拟节点的结果为准
  • 每次比对成功后,比对成功的start会向右侧移动,end会向左侧移动。在移动的过程中,当start点跑到end点右侧的时候就终止比较。


相关文章
|
JavaScript 算法 前端开发
vue 中diff算法
【10月更文挑战第10天】
457 137
|
算法 JavaScript
Vue 中的 Diff 算法
【10月更文挑战第18天】需要注意的是,Diff 算法虽然能够提高性能,但在某些复杂的场景下,可能仍然会存在一些性能瓶颈。因此,在实际开发中,我们需要根据具体情况合理地使用 Diff 算法,并结合其他优化手段来提高应用的性能。
309 56
|
算法 JavaScript UED
Diff 算法的实现原理
【10月更文挑战第18天】Diff 算法是 Vue.js 中实现高效 DOM 更新的核心机制,通过合理的比较和优化策略,能够在保证界面正确性的同时,最大程度地减少 DOM 操作,提高应用的性能和用户体验。
637 2
|
JavaScript 算法 前端开发
【VUE】Vue的diff算法和React的diff算法
【VUE】Vue的diff算法和React的diff算法
|
机器学习/深度学习 JavaScript 算法
面试中的网红虚拟DOM,你知多少呢?深入解读diff算法
该文章深入探讨了虚拟DOM的概念及其diff算法,解释了虚拟DOM如何最小化实际DOM的更新,以此提升web应用的性能,并详细分析了diff算法的实现机制。
|
10月前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
794 2
|
9月前
|
缓存 JavaScript
vue中的keep-alive问题(2)
vue中的keep-alive问题(2)
666 137
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
1362 0
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
|
JavaScript 数据可视化 前端开发
基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用案例解析
本文介绍了基于Vue和D3实现可拖拽拓扑图的技术方案与应用实例。通过Vue构建用户界面和交互逻辑,结合D3强大的数据可视化能力,实现了力导向布局、节点拖拽、交互事件等功能。文章详细讲解了数据模型设计、拖拽功能实现、组件封装及高级扩展(如节点类型定制、连接样式优化等),并提供了性能优化方案以应对大数据量场景。最终,展示了基础网络拓扑、实时更新拓扑等应用实例,为开发者提供了一套完整的实现思路和实践经验。
1823 78