vue 中diff算法

简介: 【10月更文挑战第10天】

1. 前言
vue 中的虚拟 DOM,diff算法,大家都有所耳闻
但是总感觉不那么透彻,所以看了几遍官网,简单整理如下
后续发现有文章总结,但是在github上面,有些人可能访问不到,所以我就简单写下
2. 虚拟 DOM 是什么 what
虚拟 DOM (Virtual DOM,简称 VDOM) 是一种编程概念,意为将目标所需的 UI 通过数据结构“虚拟”地表示出来,保存在内存中,然后将真实的 DOM 与之保持同步。
这个概念是由 React 率先开拓,随后在许多不同的框架中都有不同的实现,当然也包括 Vue
与其说虚拟 DOM 是一种具体的技术,不如说是一种模式,所以并没有一个标准的实现
3. diff 算法 是什么 what
如果我们有两份虚拟 DOM 树,渲染器将会有比较地遍历它们,找出它们之间的区别,并应用这其中的变化到真实的 DOM 上。这个过程被称为更新 (patch),又被称为“比对”(diffing) 或“协调”(reconciliation)。
一个运行时渲染器将会遍历整个虚拟 DOM 树,并据此构建真实的 DOM 树。这个过程被称为挂载 (mount)。
也就是说diff算法是在 挂载 的时候,对虚拟 DOM /新旧 VNode 进行比对的算法
再具体diff 算法是一种通过同层的树节点进行比较的高效算法
4. 特点
比较只会在同层级进行, 不会跨层级比较
在diff比较的过程中,循环从两边向中间比较
5. 比较方式
1.diff整体策略为:深度优先,同层比较

2.比较的过程中,循环从两边向中间收拢
6. 原理分析
当数据发生改变时,set方法会调用Dep.notify通知所有订阅者Watcher,订阅者就会调用patch给真实的DOM打补丁,更新相应的视图
源码位置:src/core/vdom/patch.js
主要是一个 function patch(oldVnode, vnode, hydrating, removeOnly) {}函数
function patchVnode (oldVnode, vnode, insertedVnodeQueue, removeOnly) {}
源码挺多的也有分析原址
7. 小结
当数据发生改变时,订阅者watcher就会调用patch给真实的DOM打补丁
通过isSameVnode进行判断,相同则调用patchVnode方法
patchVnode做了以下操作:
2.1 找到对应的真实dom,称为el
2.2 如果都有都有文本节点且不相等,将el文本节点设置为Vnode的文本节点
2.3 如果oldVnode有子节点而VNode没有,则删除el子节点
2.4 如果oldVnode没有子节点而VNode有,则将VNode的子节点真实化后添加到el
如果两者都有子节点,则执行updateChildren函数比较子节点
updateChildren主要做了以下操作:
3.1 设置新旧VNode的头尾指针
3.2 新旧头尾指针进行比较,循环向中间靠拢,根据情况调用patchVnode进行patch重复流程、调用createElem创建一个新节点,从哈希表寻找 key一致的VNode 节点再分情况操作

相关文章
React技术栈-虚拟DOM和DOM diff算法
这篇文章介绍了React技术栈中的虚拟DOM和DOM diff算法,并通过一个实际案例展示了如何使用React组件和状态管理来实现动态更新UI。
58 2
react中虚拟dom和diff算法
在React中,虚拟DOM(Virtual DOM)和Diff算法是两个核心概念,它们共同工作以提高应用的性能和效率。
62 4
Diff 算法的实现原理
【10月更文挑战第18天】Diff 算法是 Vue.js 中实现高效 DOM 更新的核心机制,通过合理的比较和优化策略,能够在保证界面正确性的同时,最大程度地减少 DOM 操作,提高应用的性能和用户体验。
69 2
|
4月前
|
Vue 中的 Diff 算法
【10月更文挑战第18天】需要注意的是,Diff 算法虽然能够提高性能,但在某些复杂的场景下,可能仍然会存在一些性能瓶颈。因此,在实际开发中,我们需要根据具体情况合理地使用 Diff 算法,并结合其他优化手段来提高应用的性能。
34 1
学习react基础(1)_虚拟dom、diff算法、函数和class创建组件
本文介绍了React的核心概念,包括虚拟DOM、Diff算法以及如何通过函数和类创建React组件。
54 3
面试中的网红虚拟DOM,你知多少呢?深入解读diff算法
该文章深入探讨了虚拟DOM的概念及其diff算法,解释了虚拟DOM如何最小化实际DOM的更新,以此提升web应用的性能,并详细分析了diff算法的实现机制。
基于Retinex算法的图像去雾matlab仿真
本项目展示了基于Retinex算法的图像去雾技术。完整程序运行效果无水印,使用Matlab2022a开发。核心代码包含详细中文注释和操作步骤视频。Retinex理论由Edwin Land提出,旨在分离图像的光照和反射分量,增强图像对比度、颜色和细节,尤其在雾天条件下表现优异,有效解决图像去雾问题。
基于DWA优化算法的机器人路径规划matlab仿真
本项目基于DWA优化算法实现机器人路径规划的MATLAB仿真,适用于动态环境下的自主导航。使用MATLAB2022A版本运行,展示路径规划和预测结果。核心代码通过散点图和轨迹图可视化路径点及预测路径。DWA算法通过定义速度空间、采样候选动作并评估其优劣(目标方向性、障碍物距离、速度一致性),实时调整机器人运动参数,确保安全避障并接近目标。
139 68
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等