vue心得之 源码解析v-for为什么要加key

最新推荐文章于 2023-07-08 09:18:09 发布
最新推荐文章于 2023-07-08 09:18:09 发布
阅读量316 收藏
点赞数
分类专栏： VUE
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32705043/article/details/105404487
版权

为了标识该节点是该节点，优化patch算法，在某些情况下可以减少dom操作

具体使用场景即作用参考下源码（vue2）

由以上代码可以理解网上的这两张图了

对arrData= [a, b, c, d, e]

更新成arrData= [a, b, f, c, d, e]

在 v-for循环遍历后添加了key能标识原本的a, b, c, d, e，这样在更新数组后，vue做patch算法时能够通过key属性精确的知道原本的c,d,e节点，和新的c,d,e节点进行对比，而此时新的c,d,e并没变化，和旧节点对比后不会出发真实的dom操作

没有key属性，vue做patch算法时可能不能准确找到原本的c,d,e节点，分别和新的f,c,d进行对比，此时数据不一致大概率会引起真实dom操作

OJCC
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浅谈VUE中演示v-for为什么要加key
10-15
主要介绍了浅谈VUE中演示v-for为什么要加key，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
在Vue中为什么v-for一定要加key
小帅的编程笔记
11-10 3156
如果你已经很熟悉Vue，一定也会很熟悉v-for指令。如果用过其他的前端框架的话，它们也都提供了在HTML模板中循环数据标记的方法。今天这篇文章让我们搞明白为什么key属性对于v-for这么重要。 我在刚开始写Vue时，也很少去写key 属性，因为它也不是必需的，不写也不会报错，也不会耽误数据渲染。但当项目中配了ESLint的规则，必需要写key时，我就统一的都把index索引作为key，然后接着开发，就像下面这样： <h1 v-for="(item, index) in list" :key="in
vue中v-for为什么要加key
weixin_43743804的博客
06-29 3490
可以简单的这样理解：没有 key 属性，状态默认绑定的是位置，有 key 时，状态根据key的值绑定到了相应的数组元素上。 之所以加上key是因为vue源码是内部数据驱动，通过改变数据进而达到改变视图，加上key这样算法更容易定位到相应的元素，避免去遍历DOM造成的性能的消耗。 例 不加 key 的 <div> <input type="text" v-model='name'> <button @click='add'>添加</button> &lt
Vue：v-for中为什么要使用key
hhwpf的博客
07-08 1432
同上面操作，还是选中第一个节点的复选框，删除前的key是1 2 3，因为删除的是第一个数据，所以删除后的key就是2 3，这时候就会知道2和3是需要复用的，1是被删除掉的，这时候就会根据key找的对应节点做移动，最后删除没有找到key的元素，这时候就正确了。key主要用来做dom diff算法用的，diff算法是同级比较，比较当前标签上的key还有它当前的标签名，如果key和标签名都一样时只是做了一个移动的操作，不会重新创建元素和删除元素。算法就可以正确的识别此节点，找到正确的位置区插入新的节点；
Vue-源码解析key的作用
qq_32644987的博客
04-11 500
1、key的作用 我们可以在Vue官方看到key的定义和作用: key的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。 有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。 最常见的用例是结合 v-for： <ul
vue的注意规范之v-if 与 v-for 一起使用教程
10-16
在Vue.js中，`v-if` 和 `v-for` 是两个非常重要的指令，它们各自有着不同的用途。然而，当这两个指令同时使用时，需要注意一些规范和最佳实践，以避免性能问题和不必要的复杂性。以下是对 `v-if` 和 `v-for` 一起...
vue中使用v-for时为什么不能用index作为key
11-21
在Vue和React等现代前端框架中，`v-for`（Vue）或`map`（React）等指令用于遍历数组并动态渲染列表。在使用这些指令时，为列表项提供`key`属性是非常重要的，因为它对虚拟DOM的Diff算法有着直接影响。然而，使用索引...
解决vue v-for 遍历循环时key值报错的问题
10-18
在Vue.js中，`v-for`指令用于遍历数组或对象，它是一个非常重要的功能，但如果不正确地使用`key`属性，可能会遇到警告或性能问题。本文将深入探讨这个问题，帮助你理解如何正确处理`v-for`循环中的`key`值。 首先，...
让Vue的v-for支持迭代器遍历
weixin_34015566的博客
12-04 1176
事情的缘由 在写一个项目的时候希望使用Map来进行遍历，然后我取出了Map的keys，keys是一个Map Iterator（迭代器，ES6引入的Symbol.iterator）类型，这时我尝试使用v-for来对迭代器进行遍历，当然我的期望是能够遍历出来。 我们都知道vue的v-for提供了两种遍历方式， v-for="item in items" v-for="item of items" 复制...
使用vue for时为什么要key【推荐】
10-16
很多朋友不明白在使用vue for时为什么要key，key的作用有哪些,在文中给大家详细介绍，需要的朋友可以参考下
浅谈vue.js中v-for循环渲染
10-19
本篇文章主要介绍了浅谈vue.js中v-for循环渲染，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue v-for直接循环数字实例
10-16
今天小编就为大家分享一篇vue v-for直接循环数字实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
关于Vue中 v-for指令必须加key的原理揭秘
gebieren的博客
05-27 460
不添加key的时候，代码如下 <div id="app"> <div class="content"> <h2>你最喜欢的女明星:</h2> <input type="text" v-model="actorName" /> <button @click="add">添加其他喜欢的女明星</button> <ul>
Vue源码阅读（22）：v-for 指令的源码解析
f18855666661的博客
08-26 1411
开始正文前，大家可以先复习一下 v-for 指令的用法，对应的官方文档点击这里。 今天和大家讲讲 v-for 指令的底层实现原理，它的底层实现其实很简单，主要看v-for 指令对应的代码字符串是如何生成对应 vnode 的，我们以一个简单的例子进行解析。 new Vue({ el: '#app', data() { return { names: ['小明', '小花', '小山'] } }, methods: {}, template: ` ..
Vue3源码解读之patch
yyzzabc123的博客
09-28 143
关于Vue3中数据发生变更，最终影响到页面发生变化的过程，我们本篇文章只对componentEffect以及以后的代码进行讲解，对于数据变更后，是如何执行到componentEffect函数，以及为何会执行componentEffect，后面的文章再进行讲解。大家可以看下下面isSameVNodeType的代码，大家在写代码的时候，为了能够提高页面性能，dom diff的速度，如果没有发生变更的元素，key一定要保持一样，不要。调用patch函数的过程，也就是根据VNode的type，走不同的支流的过程；
Vue.js 源码分析(十八) 指令篇 v-for 指令详解
weixin_30710457的博客
07-04 238
我们可以用 v-for 指令基于一个数组or对象来渲染一个列表，有五种使用方法，如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script sr...
前端VUE3.0,DAY18，v-for中的key
疯子的梦想@的博客
08-09 836
VUE3.0,DAY18v-for中的key与index（数据索引值）绑定key与数据唯一标识id绑定遍历时不写key的结果总结 v-for中的key与index（数据索引值）绑定 1.点击添加按钮，在原有的三个数据基础上在加一个人，然而我们把输入框里填好数据后，在点添加按钮，发现数据显示错位了。这是key与index绑定的后果。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&g
vue3.0源码解析，patch&diff过程
柯闪电，一位前端小白的博客。
05-14 1089
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
Vue3源码阅读(十一)patch
一一
08-13 299
Patch Vue 在通过 VNode 节点渲染 DOM 时,并不是通过当前的 VNode 节点去暴力的更新 DOM 节点,而是对新旧两个 VNode 节点通过 patch 算法进行比较,然后通过对比结果找出差异的属性或节点进行按需更细。显而易见,patch 能够减少不必要的开销,提升性能。 过程: 创建需要新增的节点 移除已经废弃的节点 移动或修改需要更新的节点 patchFlag的优化：细化元素类型标记,拆出元素中静态属性和可变属性等,不对不会再变化的静态属性进行元素的全量比较 // 渲染过程
vue中使用v-for为什么要加key
最新发布
07-09
在Vue中使用`v-for`指令循环渲染列表时，为每个被循环的元素添加`key`属性是一个推荐的做法。 `key`属性的作用是给每个循环的元素提供一个唯一的标识符，以便Vue能够高效地跟踪每个元素的变化。当列表中的元素发生...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值