v-for中为什么要加key，原理是什么

最新推荐文章于 2024-03-27 20:09:56 发布
最新推荐文章于 2024-03-27 20:09:56 发布
阅读量581 收藏
点赞数 1
分类专栏： 前端面试题(Vue) 文章标签： vue vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39639537/article/details/109814769
版权

原理:
1. vue实现了一套虚拟dom,使我们可以不直接操作dom元素,只操作数据就可以重新渲染页面,而隐藏在背后的原理是高效的Diff算法
2. 当页面数据发生改变,Diff算法只会比较同一层级的节点
3. 如果节点类型不同,直接干掉前面的节点,再创建并添加新的节点,不会再比较这个节点后面的子节点
如果节点类型相同,则会重新设置该节点的属性,从而实现节点的更新
4. 使用key给每个节点做一个唯一标识,Diff算法就可以正确的识别此节点,"就地更新"找到正确的位置区插入新的节点

作用:
1. 高效的更新虚拟DOM,提高渲染的性能
2. 避免数据混乱的情况出现

ternence_li
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
V-for指令为什么要加key
qq_45914170的博客
01-02 843
为什么使用v-for要添加唯一的key? 一:有key和没key的对比 没有key的时候 <div id="app"> <div> <input type="text" v-model="fruits"> <button @click="add">添加</button> </div> <ul> <li v-for="(item, i) in list"&g
根据尚硅谷老师天禹的Vue课程，自制v-for中key原理动画PPT，敬请参考
03-23
最近在看尚硅谷张天禹老师的Vue课程，他通过PPT动画的形式把v-for中key的底层原理讲解的非常透彻，觉得很生动，很遗憾没有找到对应的PPT动画资源，想必不少朋友跟我一样，为了便于后面的复习，所以花了点时间自制了...
vue中v-for的key的作用原理
weixin_51938803的博客
06-04 171
vue中v-for的key的作用原理
Vue：v-for中为什么要使用key
hhwpf的博客
07-08 1209
同上面操作，还是选中第一个节点的复选框，删除前的key是1 2 3，因为删除的是第一个数据，所以删除后的key就是2 3，这时候就会知道2和3是需要复用的，1是被删除掉的，这时候就会根据key找的对应节点做移动，最后删除没有找到key的元素，这时候就正确了。key主要用来做dom diff算法用的，diff算法是同级比较，比较当前标签上的key还有它当前的标签名，如果key和标签名都一样时只是做了一个移动的操作，不会重新创建元素和删除元素。算法就可以正确的识别此节点，找到正确的位置区插入新的节点；
V-for的用法和key属性
最新发布
qq_58638270的博客
03-27 888
【代码】V-for的用法和key属性。
浅谈VUE中演示v-for为什么要加key
12-28
说到这个问题想必要举个例子了 没有key <div id=app> <div> <input type=text v-model=name> <button @click=add>添加</button> </div> <ul> <li v-for=(item,> <input type=checkbox> {{item.name}} </li> </ul> [removed] // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#ap
vue入门：为什么使用v-for的时候必须要添加唯一的key？
热门推荐
小五
05-05 1万+
v-for中的key 使用v-for更新已渲染的元素列表时,默认用就地复用策略;列表数据修改的时候,他会根据key值去判断某个值是否修改,如果修改,则重新渲染这一项,否则复用之前的元素; 我们在使用的使用经常会使用index(即数组的下标)来作为key,但其实这是不推荐的一种使用方法; 举个例子： const list = [ { id: 1, name: ...
v-for为什么要加key
Front-End严黑C的博客
05-27 538
可以简单的这样理解：加了key(一定要具有唯一性) id的checkbox跟内容进行了一个关联。是我们想达到的效果 查过相关文档，图例说明很清晰。 vue和react的虚拟DOM的Diff算法大致相同，其核心是基于两个简单的假设 首先讲一下diff算法的处理方法，对操作前后的dom树同一层的节点进行对比，一层一层对比，如下图： 当某一层有很多相同的节点时，也就是列表节点时，D...
v-for为什么要用key,key的作用
weixin_46044574的博客
03-10 1374
key的作用 为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性 key 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列...
vue中使用v-for时为什么不能用index作为key
11-21
如果已经了解 为什么要用key，可以通过目录直接跳到下一节。 为什么要用key？ Vue 和 React 都实现了一套虚拟DOM，使我们可以不直接操作DOM元素，只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的...
vue面试题（v-if和v-for）（key的作用）（vue-router）（Vue性能优化）（nextTick）（Vue2）
11-15
1. [v-if和v-for哪个优先级更高？] 2. [你知道key的作用吗？] 3. [能说说双向绑定以及它的实现原理吗？] 4. [你了解diff算法吗？] 5. [vue中组件之间的通信方式？] 6. [简单说一说你对vuex理解？] 7. [vue-router中...
详解key在Vue列表渲染时究竟起到了什么作用
12-12
而通常在我们使用v-for这个指令的时候，Vue会要求你给循环列表的每一项添加唯一的key，那么这个key在渲染列表时究竟起到了什么作用呢？ 在解释这一点之前，你最好已经了解Vue的diff算法的具体原理是什么。 Vue2更新...
4G5G模块MSATA盘（M.2-B-KEY+M.2-E-KEY 封装） AD集成封装库.zip
11-26
4G5G模块MSATA盘（M.2_B-KEY+M.2_E-KEY 封装） AD集成封装库，已经其他一些USB3.0 ，RJ45 ,SD卡等，详细封装型号如下： Component Count : 69 Component Name ----------------------------------------------- ...
vue面试题说说你对vue、双向绑定、SPA（单页应用）、的v-show和v-if、Vue实例挂载的过程的理解?
10-26
面试官：为什么Vue中的v-if和v-for不建议一起用? 面试官：SPA（单页应用）首屏加载速度慢怎么解决？? 面试官：为什么data属性是一个函数而不是一个对象？ 面试官：Vue中给对象添加新属性界面不刷新? 面试官：Vue中...
STM32L011D4P6评估板原理图+PCB源文件（免费下载）-电路方案
04-22
STM32L011D4P6仅仅14个引脚，本评估板有2颗用户LED，1个用户按键，1个复位按键，引出全部IO，板载TI开关电源芯片tps563200，输入电压范围4.5V——17V，设计输出电压5V，最大输出电流3A，另外板载TI电平转换芯片TXB...
PT80-NEAT开发指南v1.1
06-24
V 1.0 初始版本。 2012-04-12 V1.1 修改前三章内容 2012-09-25 目录 第一章 关于本手册..........................................................................................................................
v-for中key的原理
liu0218的博客
08-03 248
v-for中key的原理、拟DOM中key的作用、对比规则、用index作为key可能会引发的问题、开发中如何选择key
VUE中v-for为什么要加key
wzg0817的博客
08-16 791
文章首发，观看更佳。— 传送门 — 我们先来举个栗子????： 如果我们不加key： <div id="app"> <div> <input type="text" v-model="name"> <button @click="add">添加</button> </div> <ul> <li v-for=" item in list">
v-for中为什么要使用key
m0_51328823的博客
02-17 802
1.可以简单的这样理解：加了key(一定要具有唯一性) id的checkbox跟内容进行了一个关联。是我们想达到的效果 2.没有key。vscode编辑器会报红下划线 3.可以这样简单地理解，无：key属性时，状态默认绑定的是位置；有：key属性时，状态根据key的属性值绑定到了相应的数组元素。 4.之所以要加上key是因为vue源码是内部数据驱动，通过改变数据进而达到改变视图的效果，加上key这样算法上容易定位到对应的元素，避免去遍历dom造成的性能的消耗 ...
在vue的v-for中使用索引index值
07-16
4. 注意，在v-for循环中，我们还需要为每个列表项提供顶级的key属性。这个key属性用于帮助Vue有效地更新列表项。 综上所述，我们可以通过使用v-for指令的第二个参数来在Vue的模板中访问循环的索引值。在使用v-for时...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值