为什么vue中的v-for key值不推荐使用index

qqlcbb 发布于2019-08-26 18:26 / 1124人阅读

摘要：如果我们使用做在我们渲染到页面的时候变成如果我们要在中间插入一条数组，，因为我们是已为值，所以当我们向数组中间插入一个新的数据，算法发现原本的三个的值没改变，只是在中间加入了一个新的元素，原本的三个得到了复用这也就利用了虚拟在性能上的优势

首先我们举一个例子
我们现在有这个数组
[

{
    id:201401,
    name:"chen"
},
{
    id:201402,
    name:"sun"
},          {
    id:201403,
    name:"wang"
},

]

如果我们使用index做key在我们渲染到页面的时候变成

如果我们要在中间插入一条数组{id:201404,name:zhou}

当我们在中间插入新元素的时候新元素的key值理所应当变成了index=1，key值也就变成了1 而原本index==1的li元素的index就变成了2，原本index==2的元素key值就变成了3 。这样就导致虚拟dom的diff算法在做比较的时候发现，key值为1，2，3的元素和原来的key值为1，2，3的元素对比的时候发现二者不一样，diff算法就会重新渲染这三个元素，原本key值为1，2的元素内容没有发生变化，但是因为key值使用的是index所以还需要重新渲染，这就失去了虚拟dom在性能上的优势，所有我们要使用唯一键值来做标记，例如id。

如果我们使用id做key在我们渲染到页面的时候变成

如果我们要在中间插入一条数组{id:201404,name:zhou}

因为我们是已id为key值，所以当我们向数组中间插入一个新的数据，diff算法发现原本的三个

的key值没改变，只是在中间加入了一个新的元素，原本的三个

得到了复用这也就利用了虚拟dom在性能上的优势

云服务器 GPU云服务器 oss中的key是什么 index html是什么域名 vue使用webrtc vue 中使用 webrtc

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110192.html

vue.js入门教程之基础语法

摘要：与绑定数据绑定一个常见需求是操作元素的列表和它的内联样式。两者只能选其一对象语法我们可以传给一个对象，以动态地切换。注意不支持语法。相比之下，简单得多元素始终被编译并保留，只是简单地基于切换。这意味着将分别重复运行于每个循环中。 vue Class 与 Style 绑定数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是属性，我们可以用 v-bind 处理...

pumpkin9 2019-08-20 19:06 评论0 收藏0
vue note 01

摘要：数据绑定方式普通的文本可以使用语法双大括号插在标签内部表达式每个绑定都只能包含单个表达式只会添加一次当再次修改时，不会触发机制插入文本较少使用插入不推荐使用计算属性基于它们的依赖进行缓存的，只有在它的相关依赖发生改变时才会重新求值。数据绑定方式： 1.普通的文本可以使用 Mustache语法 (双大括号) {{data}} 插在标签内部eg:{{}} //js: data{ ...

leanote 2019-08-21 16:48 评论0 收藏0
Vue.js源码（2）：初探List Rendering

摘要：最后举两个例子，回顾上面的内容例一改变的是数组元素中属性，由于创建的的指令，因此这里直接由指令更新对应元素的内容。下面例子来自官网，虽然看上去就比Hello World多了一个v-for，但是内部多了好多的处理过程。但是这就是框架，只给你留下最美妙的东西，让生活变得简单。 {{ todo.text }} ...

shiyang6017 2019-08-20 11:08 评论0 收藏0
Vue官方推荐的风格指南

摘要：官方推荐的风格指南个人笔记最近刚注意到官方多了一个风格指南的推荐。中始终用组件命名因为官方推荐风格命名，所以能用就用组件命名单词应该是完整的单词完整单词带易读性的好处，和书写麻烦的缺点。 Vue官方推荐的风格指南-个人笔记最近刚注意到vue官方多了一个vue风格指南的推荐。因为业务中一直用的vue，所以梳理学习一下，来增加自己代码的规范性，效果不错也可以安利到团队。文档没有对JS...

null1145 2019-08-22 18:28 评论0 收藏0
vue里面的v-for列表循环

摘要：取到里面的偶数位的值在计算属性不适用的情况下例如，在嵌套循环中你可以使用一个方法一段取值范围的也可以取整数。列表渲染 v-for v-for可以把数据中的一个数组对应为一组元素v-for 指令需要以 item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名。 {{item.text}} data:{ items:[ ...

verano 2019-08-20 19:05 评论0 收藏0