vue中diff算法理解

本文介绍了虚拟DOM的概念以及Vue.js中的diff算法。diff算法用于比较新的虚拟DOM和旧的虚拟DOM,找到差异并生成补丁,以最小的代价更新DOM。文章详细描述了diff过程中的节点比较、同级比对以及key值优化等关键步骤。
摘要由CSDN通过智能技术生成

了解diff算法前我们需要先了解什么是Virtual

一.什么是Virtual DOM(虚拟DOM)

Virtual DOM(虚拟DOM)是Real DOM(真实DOM)的JS对象 我们看下图方便理解

在这里插入图片描述(不会画图 只能借鉴一下了)
虚拟DOM 就把是 真实DOM的 标签名和标签属性和子标签以及文本节点 都以js的对象的样式呈现

二.了解diff算法

diff算法(个人简单理解):diff算法会将 新的虚拟DOM 和 旧的虚拟DOM 进行对比 找出差异 将差异封装为补丁(如果存在无差异的虚拟节点,旧虚拟节点将会得到复用),通过方法的循环遍历然后打到 真实DOM 上,以差异化最小的代价去操作DOM,
先上图

在这里插入图片描述图中标注的真实DOM对应右边虚拟DOM
一旦我改变真实DOM的文本内容 就会生成一个新的虚拟DOM(切记如果修改真实DOM文本后 就会立即执行deff算法 以最小化进行更新视图)
请添加图片描述diff算法本质就是找出新旧虚拟DOM的差异然后最小化的对视图进行更新

1.数据改变就会触发deff算法中setter

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值