vue中的key作用

最新推荐文章于 2023-08-07 22:30:05 发布
最新推荐文章于 2023-08-07 22:30:05 发布
阅读量127 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_54906091/article/details/118880242
版权

:key=‘index’

实现下图中的ul列表，生成虚拟dom的过程大致如下（此时:key=‘index’，打乱数据顺序的时候，：key=‘index’就会有问题）

  1. 循环初始数据生成在内存中生成虚拟dom
  2. 将虚拟dom转化为真实dom
  3. 此时我们在旧数据的头部插入一个对象，生成新数据
  4. vue会根据相同的key值进行比对，此时的key=‘0’的虚拟dom中文本部分不一致，所以会由 张三=>老刘，但是后面的input节点一样类型一样，且初始虚拟dom已经生成，所以会直接放到key=‘0’的虚拟dom中，出现列表错位
  5. 可以看到列表错位，同样的key值对应的节点内容不一样，一旦不一样，就会重新生成虚拟dom，导致效率低下
    key的作用

:key=‘id’,id为固定值

在这里插入图片描述
总结：
在这里插入图片描述

qq_54906091
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue中key的作用示例代码详解
10-15
总的来说，`key`在Vue的列表渲染中起到了标识符的作用，帮助Vue更智能地处理DOM操作，提高性能并避免潜在的错误。尤其是在处理具有复杂结构和状态的列表时，正确使用`key`是非常必要的。在开发过程中，应尽可能在...
如何正确理解vue中的key详解
12-30
就目前所了解的情况，key的作用有以下这些。 v-for遍历时，用id，uuid之类作为key，唯一标识节点加速虚拟DOM渲染 响应式系统没有监听到的数据，用+new Date()生成的时间戳作为key，手动强制触发重新渲染 场景一...
在 Vue 中为什么不推荐用 index 做 key
前端小白-Mr鹏帅
11-02 2735
前言 前端开发中，只要涉及到列表渲染，那么无论是 React 还是 Vue 框架，都会提示或要求每个列表项使用唯一的 key，那很多开发者就会直接使用数组的 index 作为 key 的值，而并不知道 key 的原理。那么这篇文章就会讲解 key 的作用以及为什么最好不要使用 index 作为 key 的属性值。 key 的作用 Vue 中使用虚拟 dom 且根据 diff 算法进行新旧 DOM 对比，从而更新真实 dom ，key 是虚拟 DOM 对象的唯一标识, 在 diff 算法中 key 起着
v-for=“values,index in arr“ :key=“index“ key的作用
weixin_44096391的博客
10-25 1161
vue
vue中属性key的作用（了解diff)，为什么不建议index作为key
m0_49159526的博客
11-02 1806
1. 官方文档有关key的说明 key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。 而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。 有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。 2. 举个???? 可以运行一下代码，改变key为 索引idx（或者
【react】key值使用 index和id的区别
m0_52743009的博客
10-12 819
react中key值使用 index和id的区别
Vue中 key的作用与原理
weixin_51735748的博客
08-07 2396
你真的了解Vue中的key吗？
基于vue–key值的特殊用处详解
11-19
(value, key, index) in object v-for渲染的列表的结构采用“就地复用”的策略，也就说当数据重新排列数据时，会复用已在页面渲染好的元素，不会移动 DOM 元素来匹配数据项的顺序，这种模式是高效的，改变现有位置...
Vue中 key keep-alive的实现原理
10-18
在Vue.js中，`<keep-alive>` 是一个特殊的组件，它的主要作用是缓存组件实例，以便在组件切换时避免重新渲染，从而提高应用性能。`keep-alive` 主要应用于那些频繁切换但状态需要保持的组件。下面我们将详细讨论 `...
详解如何理解vue的key属性
12-29
如果没有这个属性的时候vue应用 in-place patch（就地复用）策略。列表里的顺序发生改变的时候比如shuffle（列表打乱）的时候，vue为了提升性能，不会移动dom元素，只是更新相应元素的内容节点。 就地复用的弊端 这...
在vue项目中为啥不能用index作为key？
前端达人
11-02 1435
啊？不是吧，在vue中，不能使用index作为key呢？使用index作为key又好理解又方便，为什么不能使用呢？看文章就知道啦~.一、key的作用是什么？key的作用众所周知，看一个demo就知道：<scriptsrc="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <body> ...
vue 的指令
热门推荐
青蛙king的博客
10-27 1万+
一、vue 的指令 指令的本质：语法糖，标志位。在编译阶段 render 函数里，会把指令编译成 JavaScript 代码。 vue的14个指令： v-text v-html（不建议使用） v-show v-if v-else-if v-else v-for v-on v-bind v-model v-slot v-pre（使用频率很低） v-once（使用频率很低） v-cloak（使用频率极低，不细介绍） 1、v-text v-text 指令，会把该元素下面的所有内.
key=“item.id“ 报这个错误，改成 :key=“index“ 就好了
u012746918的博客
07-17 912
key="item.id" 报这个错误，改成 :key="index" 就好了
我用index作为key也没啥问题啊
liubangbo的专栏
08-25 268
文章转自：https://juejin.cn/post/6999932053466644517 前言 所有熟悉Vue技术栈的小伙伴，都知道在列表渲染的场景下，不能使用index或random作为key。 也有很多小伙伴在面试的时候会被面试官比较详细的追问，假如使用index作为key会有什么问题？假如使用random作为key会有什么问题？假如使用一个唯一不变的id作为key有什么好处呢？ 这道题目，表面上看起来是考察我们对同级比较过程中diff算法的理...
vue优化小技巧
qq_39189369的博客
04-05 1042
vue的性能优化
Vue 2.0 v-for 响应式key, index及item.id参数对v-bind:key值造成差异研究
weixin_30493401的博客
07-31 1036
Vue 2.0 v-for 响应式key, index及item.id参数对v-bind:key值造成差异研究 在github上阅览README.md以获得最佳阅读体验，点这里 v-for响应式key, index及item.id参数对v-bind:key值造成差异研究 实验背景 通常情况下，我们渲染一个li列表，采用v-for指令进行渲染，我们需要给渲染的每一项元素绑定一个key值，其实绑...
面试官：为什么 Vue 中不要用 index 作为 key？（diff 算法详解）
azl397985856的专栏
05-01 2268
前言Vue 中的 key 是用来做什么的？为什么不推荐使用 index 作为 key？常常听说这样的问题，本篇文章带你从原理来一探究竟。示例以这样一个列表为例：<ul> ...
vue中使用v-for时为什么不能用index作为key？
艾欢欢的博客
08-02 1万+
结论： 更新DOM的时候会出现性能问题（复用） 会发生一些状态bug 为什么要用key？ key 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。总...
为什么 Vue 中不要用 index 作为 key
学习记录
04-13 2308
前言 Vue 中的 key 是用来做什么的？为什么不推荐使用 index 作为 key？常常听说这样的问题，本篇文章带你从原理来一探究竟。 示例 以这样一个列表为例： <ul> <li>1</li> <li>2</li> </ul> 那么它的vnode也就是虚拟 dom 节点大概是这样的。 { ...
vue中key的作用
最新发布
10-07
在Vue中，key是用来提供给Vue的虚拟DOM算法的一个提示，以便于它能够跟踪每个节点的身份，从而在进行不同节点的复用和重新排序时，具有更好的性能。 当Vue进行重新渲染时，它会尽量复用已经存在的元素而不是从头开始渲染。Vue通过比较新旧虚拟节点来确定是否可以复用一个已存在的节点。这个比较过程是基于节点的key属性进行的。 如果没有提供key，Vue会使用一种默认的算法来尽量复用元素，但它并不能保证在所有情况下都能得到正确的结果。而通过给每个节点设置唯一的key，我们可以确保Vue能够准确地确定节点的身份，并正确地复用和更新节点。 使用key时需要注意以下几点： 1. key必须具有唯一性，不能重复。 2. key只需要在同一父元素的子元素之间具有唯一性，不需要全局唯一。 3. key的值最好使用具有稳定唯一性的属性，比如数据库生成的唯一ID，避免使用索引作为key。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值