vue 对key属性的解析

爱学习小㿟

已于 2022-10-17 14:48:57 修改

阅读量550

点赞数

文章标签： vue.js 前端 javascript

于 2022-10-15 10:42:48 首次发布

本文链接：https://blog.csdn.net/weixin_46472711/article/details/127331947

版权

key是什么？

当我们在使用v-for时，需要给单元加上key.

key的作用是什么呢?

官方文档中说：

当 Vue.js 用v-for正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。

接下来我们用一张图来说明一下

vue会根据初始数据生成一个虚拟DOM，并将虚拟DOM生成真实DOM渲染到页面，当我们插入新数据时，vue会根据key的属性值来比对新旧虚拟DOM，

张三和老刘的key值相同，input标签也相同，只有内容不同，vue只会修改内容，其余部分直接复用

初识数据

添加老刘后的数据

此时我们发现input框数据发生错乱，因为虚拟DOM中是看不到input的内容是什么的，vue只会帮我们比对标签.因此key的值一定要赋给一个能唯一标识这个数据的属性

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

爱学习小㿟

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 对key属性的解析

对key属性的解析
复制链接

扫一扫

vue 用key拿对象value_基于vue--key值的特殊用处详解

weixin_29532927的博客

01-12

1283

数组的v-foritem in itemsitem of itemsitem,index in items(item，index) in items对象的v-for(键值，键名，索引)value in object(value, key) in object(value, key, index) in objectv-for渲染的列表的结构采用“就地复用”的策略，也就说当数据重新排列数据时，会复用...

vue 中的 key

无知小九的博客

08-08

1707

diff 算法需要比对虚拟 dom 的修改，然后异步的渲染到页面中，当出现大量相同的标签时，vnode 会首先判断 key 和标签名是否一致，如果一致再去判断子节点一致，使用 key 可以帮助 diff 算法提升判断的速度，在页面重新渲染时更快消耗更少相关代码如下 diff 算法详解传送门详细资料可以参考：《Vue 面试中，经常会被问到的面试题 Vue 知识点整理》《Vue2.0 v-for 中 :key 到底有什么用？》《vue 中 key 的作用》使用 index 作为 key和没写基本上没区

参与评论您还未登录，请先登录后发表或查看评论

vue 中 key的作用

A+的博客

09-16

233

其实不只是vue，react中在执行列表渲染时也会要求给每个组件添加上key这个属性。要解释key的作用，不得不先介绍一下虚拟DOM的Diff算法了。我们知道，vue和react都实现了一套虚拟DOM，使我们可以不直接操作DOM元素，只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Diff算法 vue和react的虚拟DOM的Diff算法大致相同，其核心是基于两个简单的假设：两个相同的组件产生类似的DOM结构，不同的组件产生不同的DOM结构。同一层级的一组节点，他们可以通过唯一的

vue之根据key之在多维数组中查找对应元素的父title和本身title

smilling sky的博客

09-11

951

有过类似文章，参考的是那里的方法，已忘记网址 crumb( haystack, needle, path = [], property = “key”, children = “children”, title = “title” ) { if ( haystack.some((item) => { if (item[property] === needle) { path.push(item[title]); return true; } else if (item[children]) { pat

vue json通过key取值

Meditation_Crazy

03-06

7392

前言 descriptionJson[obj.key]

vue 路由对象属性

01-07

vue源码解析.zip

01-12

Vue的diff算法包括keyed和无keyed两种，keyed模式下，Vue会基于元素的key属性进行更精确的匹配和移动，优化了大型列表的渲染效率。再来看"Vue源码探秘之数据响应式原理"。Vue的核心特性之一是数据响应性，即当数据...

详解Vue双向数据绑定原理解析

08-29

下面是对 Vue 双向数据绑定原理的详细解析。基本原理 Vue 采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty() 来劫持各个属性的 setter 和 getter。当数据发生变化时，发布消息给订阅者，...

Vue面试题解析及答案

热门推荐

weixin_45785873的博客

01-13

2万+

准备数据 data(){ return { obj:{ '001':'a', '002':'b', '003':'c', '004':'d' } } }, 1、遍历对象获取所有的key和value for (let k in this.obj){ console.log(k

vue 用key拿对象value_vue 中的key 的用法

weixin_39530288的博客

12-19

611

(Emitted value instead of an instance of Error) : component lists rendered with v-for should have explicit keys. See https://vuejs.org/guide/list.html#key for more info.我们有的时候会在npm run dev的时候发现会出现这样...

vue遍历数组对象（key value）

weixin_38999134的博客

05-11

5694

Arr=[ { a:1 }, { b:2 }, ] <li v-for="(value, key, index) in Arr"> <div v-for="(txvalue, name, num) in value"> <span class="title">{{ name }}:</span> <span>{{ txvalue }}</span> </div> &lt

vue 用key拿对象value_Vue 基本实现

weixin_33076057的博客

12-05

2031

前言学习前端到了一定的程度，尤其看了部分 jQuery 源码后，我想尝试着自己去动手造轮子。但是我的方向或者参考貌似只能是 Vue 。毕竟它的 MVVM（Model-View-ViewModel）架构实在是好用，我们只需要关注自己的数据，去改变数据后视图会自动的进行更新。所以我决定自己动手实现一遍 Vue 的响应式原理。进而更深刻的理解 MVVM 这种模式及其好处。所以在本文开始之前你必须已经对 ...

js map 只输出key_深入浅出 Vue 中的 key 值

weixin_39526459的博客

11-20

276

从前篇文章说起前几天我写了一篇文章，sortable.js——Vue 数据更新问题，当时自己只是从数据的强制刷新角度去分析，而且并没找到真正的“元凶”。很感谢有人帮我指出，可能是Vue的key值，导致数据渲染不正确的。由此，我做了进一步的尝试。key 的一个错误使用——使用index作为key不知道你在写v-for的时候，会不会直接使用index作为它的key...

vue function (i)第一次点击不执行_【Vue原理】Watch - 源码版

weixin_39615984的博客

12-12

288

专注 Vue 源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于 Vue版本2.5.17今天继续探索 Watch 源码，废话不多说了带着我的几个疑问开始1、什么时候初始化 2、怎么确定监听哪些值 3、深度监听怎么回事 4、怎么触发我的函数这些问题的答案会掺杂在源码的解析中，我发现这几篇的写作套路都差不多.....也可以看查一下我的白话...

vue 获取指定key的value_vue 将数组对象某一个key值进行计算，如何再调用此计算的值...

weixin_39562340的博客

12-21

1582

1，直接上代码el: '#flip-list-demo',data: {test:[],items11: [{number:1,name:'北京',money:8889},{number:2,name:'广东',money:8888},{number:3,name:'天津',money:8888},],items12:[{number:4,name:'浙江',money:88888},{numbe...

vue取通过key取value_实现一个简易的vue：响应式

weixin_39709674的博客

12-30

1267

使用vue时，在修改数据data的时候vue能自动更新视图，抱着这点好奇心，看了下源码，Vue通过设定对象属性的 setter/getter 方法来监听数据的变化，通过getter进行依赖收集，通过setter在数据变更的时候更新视图。现在实现一个简易版的 vue。为方便后面扩展，先写一个临时的V(题图)，代码如下:class V { constructor(options) { ...

Vue 循环map对象拿到key值和value值

qq_42970173的博客

09-30

1万+

适用场景： vue中定义的map对象 map : { name : 'xxx' } 接口回显map格式的数据 data :{ key : value} 都可以通过以下方式拿到key和value的值 for(const key in map){ console.log("key名称是："+key+",key的值是："+map[key]) } ...

Vue基础教程：Day02 模板语法与v-for的key属性解析

另外，关于**v-for的key属性**，Vue官方推荐在使用v-for循环时添加key属性。这是为了优化虚拟DOM的Diff算法，尤其是在处理列表渲染时。没有key的情况下，当列表项变动时，Vue可能采用较简单的算法来更新DOM，可能...