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

最新推荐文章于 2024-01-24 09:03:12 发布
最新推荐文章于 2024-01-24 09:03:12 发布
阅读量516 收藏 3
点赞数 4
分类专栏： vue源码分析 文章标签： 算法 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/frontendchen/article/details/118314516
版权

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算法更加的高效
提测前一定好好自测
关注
  • 4
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
vue列表渲染中key的作用_Vue列表渲染中的key值的重要性
weixin_39851887的博客
12-20 747
1 .index值不是一定不变的，如果不加key值的话，删除前面的项。后面的index可能变也可能不变，比如加个定时器的时候会变，不加定时器不会变2 .不加key的话，更新机制的进行diff的时候是会全部比较的，比如删除第一个的话，后面的元素其实都不一样，会一项一项的比较。然后全部元素都替换，没有做到最小更新。而且里面的传的值也会变，如果这个时候你要根据里面的值删除元素的话，就会出错，尤其是加了定...
vue3中key值的作用，为什么不能用索引作为key值
weixin_43183219的博客
05-31 1131
虚拟DOM，vue3中key值的作用，为什么不能使用索引作为key值
WEB前端开发面试实录题
m0_65382120的博客
03-29 779
1.浏览器不兼容h5中标签？比如div等 没回答不上来，不是特别老的浏览器一般都不会出现这种状况 2.vue中key有什么用？ key可以加快diff算法，加快查询到节点，因为diffdiff算法是针对两个虚拟dom,首先是判断名称，相同比较key.key相同就认为是相同的节点，v-for的时候必须带一个：key表示唯一标识 3.说说原型链 每个函数中都有 prototype与__proto__,当访问一个对象的某个属性时，首先会在他自身找，如果没有找到，就会通过隐式的_proto_去找到他...
vue中key的原理详解（超详细，收藏好）
常来常往，共同成长
01-09 2372
key是给每一个vnode的唯一id，也是diff的一种优化策略，可以根据key，更准确， 更快的找到对应的vnode节点
Vue和React中的key作用
how2js的博客
12-07 577
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之间添...
vue数据监听 -key的作用 和diff算法
idiot_MAN的博客
09-19 1283
2：数组截取 3：更新值数组非变更方法，返回新数组，不会导致v-for更新，可采用覆盖数组 或this.$set。
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. 何时更新...
vue的diff算法知识点总结
01-19
diff算法首先要明确一个概念就是diff的对象是虚拟dom，更新真实dom则是diff算法的结果 Vnode基类 constructor ( 。。。 ) { this.tag = tag this.data = data this.children = children this.text = text ...
详解为什么Vue中不要用index作为key(diff算法)
10-15
1. **顺序变化的性能损失**：当列表元素的顺序发生改变时，如果使用索引作为 `key`，Vue 的 `diff` 算法可能会错误地认为这些元素是不同的，因为它们的 `key` 已经发生了变化。这会导致原本可以通过简单移动实现的...
VUE面试题答案
cxuyuanLch的博客
03-18 1636
单页应用spa/多页应用 SPA（single-page application），翻译过来就是单页应用SPA是一种网络应用程序或网站的模型。 它通过动态重写当前页面来与用户交互，这种方法避免了页面之间切换打断用户体验。 在单页应用中，所有必要的代码（HTML、JavaScript和CSS）都通过单个页面的加载而检索，或者根据需要（通常是为响应用户操作）动态装载适当的资源并添加到页面页面在任何时间点都不会重新加载，也不会将控制转移到其他页面。 我们所熟悉的js框架react，vue等等都SPA页面。 多页应
(四)vue3之key值绑定
weixin_50096821的博客
03-13 5099
我们知道，key值在vue中是非常重要的，可以在dom diff中提高dom的可复用性。那么在vue2和vue3中的使用有什么不同呢？ 1.在v-if/v-else/v-else-if中，key值绑定不再是必须的，因为vue3会自动生成对应的唯一key值 2.如果你在vue3中（如v-if）手动绑定key值，那么其他对应指令中（如v-else）也必须手动绑定key值 3.<template v-for>中的key值应该绑定在<template>中而不再绑定在它的子元素中 1.v-
vue基础3：key, 计算属性, 过滤器, 侦听器
m0_60511911的博客
08-08 243
目的: 转换格式, 过滤器就是一个函数, 传入值返回处理后的值过滤器只能用在, ==插值表达式和v-bind表达式==Vue中的过滤器场景字母转大写, 输入"hello", 输出"HELLO"字符串翻转, "输入hello, world", 输出"dlrow ,olleh"语法:Vue.filter("过滤器名", (值) => {return "返回处理后的值"})filters: {过滤器名字: (值) => {return "返回处理后的值"}例子:全局定义字母都大写的过滤器。
v-for中为何要使用key
田兴的博客
11-02 4770
一、什么是vuex vuex ：是一个专为vue.js开发的状态管理器，采用集中式存储的所有组件状态 五个属性： state、getters、mutations、actions、module 基本使用: 新建store.js文件，最后在main.js中引入，并挂载到实列上 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const state = {} const getters = {} con
面试官：说说为什么要在列表组件中写 key，其作用是什么？
weixin_44475093的博客
12-17 1230
一、Key是什么开始之前，我们先还原两个实际工作场景当我们在使用v-for时，需要给单元加上key<ul> <liv-for="iteminite...
一文讲清楚vue3中的内置特殊内容key、ref、is、＜component＞、＜slot＞、＜template＞
最新发布
m0_57202548的博客
01-24 2717
在 Vue 3 中，key的作用主要与重新渲染和优化有关。用于标识列表中的元素，以便在列表更新时，Vue 可以识别哪些元素发生了变化，而不是简单地替换所有元素。key绑定的值应为基础类型，如字符串或数字。不要使用对象作为v-for的 key。例如，如果有一个动态列表，希望在列表更新时保留某些元素的身份，可以使用key。在这个例子中，使用key可以确保列表的渲染更加高效，因为它可以区分哪些元素发生了变化，而不是每次重新创建所有元素。同一父元素下的子元素必须具有。
Vue03/Vue指令、v-for的key说明、Vue 就地复用策略
m0_64494670的博客
10-30 1848
Vue03/Vue指令、Vue 就地复用策略
面试官：Vue3.0 性能提升主要是通过哪几方面体现的？
小生方勤
02-23 254
一、编译阶段回顾Vue2，我们知道每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把用到的数据property记录为依赖，当依赖发生改变，触发setter，则会通知wa...
vue2中 key对diff算法的作用
04-01
在 Vue2 中，key 对 diff 算法起到了非常重要的作用，它的主要作用有以下几个： 1. 提高渲染性能：Vue2 使用 Virtual DOM 技术来优化渲染性能，而 Virtual DOM 的核心就是 diff 算法。在 diff 算法中，通过比较新旧...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值