10 分钟搞懂 key 对vue3 diff性能提升

最新推荐文章于 2025-02-05 23:13:24 发布
原创 最新推荐文章于 2025-02-05 23:13:24 发布 · 690 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#算法 #vue.js

本文通过对比有key和无key情况下Vue3的diff算法，详细解释了key如何提高列表更新时的性能。在无key场景下，即使部分项未发生变化也需要进行不必要的更新；而在有key的情况下，Vue能够更高效地识别并更新变化的部分。

10分钟 搞懂 key 对 vue3 diff性能的提升（真的10分钟）

Talk is cheap, show you the code
点击按钮时会在中间插入一个 f
在这里插入图片描述

我们可以确定的是，这次更新对于ul和button是不需要进行的，需
要更新的是我们li的列表：

  • 在 vue 中，对于相同父元素的子节点并不会重新渲染整个列表
  • 因为对于列表中的a、b、c、d 它们都是没有变化的
  • 在操作真实 DOM 的时候，我们只需要在中间插入一个 f 的 li 即可

那么Vue中对于列表的更新究竟是如何操作的呢？
Vue事实上会对于有key和没有key会调用两个不同的方法

  • 事实上会对于有key和没有key会调用两个不同的方法
  • 有key，那么就使用 patchKeyedChildren方法
  • 没有key，那么久使用 patchUnkeyedChildren方法
    在这里插入图片描述

没有 key 的源码操作

在这里插入图片描述

没有 key 的过程如下

在这里插入图片描述
我们会发现上面的diff算法效率并不高

  • c和d来说它们事实上并不需要有任何的改动
  • 但是因为 c 被 f 占了，所有后续的内容都要依次改动，并且最后进行新增；

有 key 的源码操作

在这里插入图片描述

有 key 的diff 图解如下

在这里插入图片描述
第一步的操作是从头开始进行遍历、比较

  • a和b是一致的会继续进行比较
  • c和f因为key不一致，所以就会break跳出循环

在这里插入图片描述
第二步的操作是从尾部开始进行遍历、比较
在这里插入图片描述
第三步是如果旧节点遍历完毕，但是依然有新的节点，那么就新增节点
在这里插入图片描述
第四步是如果新的节点遍历完毕，但是依然有旧的节点，那么就移除旧节点
在这里插入图片描述
第五步是最特色的情况，中间还有很多未知的或者乱序的节点

Vue在进行diff算法的时候，会尽量利用我们的key来进行优化操作

  • 在没有key的时候我们的效率是非常低效的
  • 在进行插入或者重置顺序的时候，保持相同的key可以让diff算法更加的高效
Vue 3 Diff 算法受 `v-for` 循环中的 `key` 属性影响
专注
01-10 1169
是一种标识，它用于唯一标记每个虚拟 DOM 节点。Diff 算法会根据。的选择直接关系到 Diff 算法的效率和最终的 DOM 更新结果。// 之前选中第三个，点击删除后，会出现错乱情况。// 给key加上一个唯一的id即可解决问题。判断新旧节点是否是同一个节点。
一文搞懂Vue Diff算法
小王的技术库
12-14 1584
简单diff算法便是拿新节点数组中的节点去旧节点数组中查找，通过key来判断是否可以复用。并记录当前的lastIdx，以此来判断节点间的相对位置是否发生变化，如果变化，需要进行移动。双端diff算法的优势在于对于一些比较特殊的情况能更快的对节点进行处理，也更贴合实际开发。而双端的含义便在于通过两组子节点的头尾分别进行比较并更新。最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。
vue列表渲染中key的作用_Vue列表渲染中的key值的重要性
weixin_39851887的博客
12-20 835
1 .index值不是一定不变的，如果不加key值的话，删除前面的项。后面的index可能变也可能不变，比如加个定时器的时候会变，不加定时器不会变2 .不加key的话，更新机制的进行diff的时候是会全部比较的，比如删除第一个的话，后面的元素其实都不一样，会一项一项的比较。然后全部元素都替换，没有做到最小更新。而且里面的传的值也会变，如果这个时候你要根据里面的值删除元素的话，就会出错，尤其是加了定...
WEB前端开发面试实录题
m0_65382120的博客
03-29 906
1.浏览器不兼容h5中标签？比如div等 没回答不上来，不是特别老的浏览器一般都不会出现这种状况 2.vue中key有什么用？ key可以加快diff算法，加快查询到节点，因为diffdiff算法是针对两个虚拟dom,首先是判断名称，相同比较key.key相同就认为是相同的节点，v-for的时候必须带一个：key表示唯一标识 3.说说原型链 每个函数中都有 prototype与__proto__,当访问一个对象的某个属性时，首先会在他自身找，如果没有找到，就会通过隐式的_proto_去找到他...
vue中key的原理详解（超详细，收藏好）
常来常往，共同成长
01-09 6328
key是给每一个vnode的唯一id，也是diff的一种优化策略，可以根据key，更准确， 更快的找到对应的vnode节点
# Vue3 Diff 算法与key
hh_skytrue的博客
09-04 268
Vue3 Diff 算法与key 先来看看官方的解释 key属性主要用在Vue的虚拟DOM算法，在新旧nodes对比时辨识VNodes； 如果不使用Key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法； 而使用key时，它会基于key的变化重新排列元素顺序，并且会移除/销毁key不存在的元素； 官方的解释对于初学者来说并不好理解，比如下面的问题： 什么是新旧nodes，什么是VNode？ 没有key的时候，如何尝试修改和复用的？ 有ke
面试官：Vue3.0 性能提升主要是通过哪几方面体现的？
小生方勤
02-23 302
一、编译阶段回顾Vue2，我们知道每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把用到的数据property记录为依赖，当依赖发生改变，触发setter，则会通知wa...
Vue的diff算法详解和key作用(较详细)
01-20
Vue的diff算法详解和key作用 在前端开发中，Vue.js是一个非常流行的MVVM框架，它的核心特性之一是使用虚拟DOM（Virtual DOM）来优化页面更新。为了理解Vue的diff算法，首先需要了解DOM（Document Object Model）的...
详解vue的diff算法原理
08-27
Vue的diff算法原理详解 在本文中，我们将详细介绍 Vue 的 diff 算法原理，diff 算法是 Vue 框架中的一种关键技术，用于高效地更新虚拟 DOM 和真实 DOM。本文将从以下几个方面来介绍 diff 算法的原理： 1. 何时更新...
Vue3 Diff算法
cookie-y的博客
02-02 609
当新旧vnode的子节点都是一组节点时，为了以最小的性能开销完成更新操作，需要比较两组子节点。用于比较的算法就是Diff算法。
详解为什么Vue中不要用index作为key(diff算法)
11-20
前言 Vue 中的 key 是用来做什么的？为什么不推荐使用 index 作为 key？常常听说这样的问题，本篇文章带你从原理来一探究竟。 另外本文的结论对于性能的毁灭是针对列表子元素顺序会交换、或者子元素被删除的特殊情况，提前说明清楚，喷子绕道。 本篇已经收录在 Github 仓库，欢迎 Star： https://github.com/sl1673495/blogs/issues/39 示例 以这样一个列表为例： 1 2 那么它的 vnode 也就是虚拟 dom 节点大概是这样的。 { tag: 'ul',
前端框架 & diff算法优化 & vue中的key
weixin_45656737的博客
09-08 368
使用前端框架（angular/vue/react）带来哪些好处，相对于使用jQuery click jquery通过操作dom进行完成视图更新，vue通过改变数据来完成更新视图； 过程是数据改变 =====> 虚拟DOM计算变更 ====> 操作真实DOM ===> 视图更新；从改变数据到视图更新不直接操作dom，操作dom的过程是由框架来完成的。 虚拟DOM：js模拟，如下题图一右侧 vue框架中的diff算法是如何优化渲染的计算或者优化效率的 click 使用虚拟DOM模拟真.
vue v-for 需要 key 实例讲解 原理 diff算法
KEEP RUNNING的博客
08-03 1459
有无key的差异 1、without key 当选中 notice 1 时，input添加一个新值(notice 3)后选中是notice 3，并不是我们想要的结果，我们想要的是当添加 notice 3 后，选中的依然是 notice 1 2、with key 加了 key 之后，是理想效果 原理 在我们进行添加数据后，vue 内部时通过 Diff 算法对虚拟 DOM 进行更新，从而进行页面数据更新渲染。 （1）diff算法原理-BC之间插入一个F节点： （2）...
vue数据监听 -key的作用 和diff算法
idiot_MAN的博客
09-19 1612
2：数组截取 3：更新值数组非变更方法，返回新数组，不会导致v-for更新，可采用覆盖数组 或this.$set。
Vue中的key的作用及原理——diff算法
weixin_47342624的博客
09-27 721
在没有key的时候我们的效率是非常低效的；在进行插入或者重置顺序的时候，保持相同的key可以让diff算法更加的高效；
vue列表中为什么要设置key，有什么作用？为什么key最好不要设置为index?
07-21 1705
2、当我们在头部插入一个节点，是不是插入的节点就变成0，原来的0、1、2、3、4都加一位，我们来diff比较的时候，是不是每一项又都不一样了，sameVnode返回的都是false，标签不能复用，都要重新创建一个，插入到节点中，这样是不是也全部需要重新渲染，影响性能。3、如果我们列表每一项有一个chekbox元素，勾选的第一项，再插入新元素的时候，是不是你插入的节点被勾选了，这样是不是就不对了，有问题。4、而且每一个元素都替换，是不是特别慢，并且列表需要全部重新渲染，大大的影响的性能。...
Vue和React中的key作用
how2js的博客
12-07 658
React和Vue中的key都有提高渲染效率的目的，但是这句话也不是一定的 假设我们有如下顺序的节点 <div>A</div>// A DOM <div>B</div>// B DOM <div>C</div>// C DOM <div>D</div>// D DOM 如果现在需要在B C之间添...
面试官：说说为什么要在列表组件中写 key，其作用是什么？
weixin_44475093的博客
12-17 1470
一、Key是什么开始之前，我们先还原两个实际工作场景当我们在使用v-for时，需要给单元加上key<ul> <liv-for=&#34;iteminite...
vue2-key的原理与作用
最新发布
xiaobangkeji的博客
02-05 561
vue2-key的原理与作用
深入解析Vue3.0 diff算法：提升性能的关键
Vue 3.0的diff算法优化是其性能提升的关键因素之一，通过理解diff的工作机制，开发者可以更好地优化应用性能，避免不必要的性能开销。正确使用key对于v-for循环列表的性能和正确性至关重要，因此在开发过程中应给予...
评论 3
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值