当前位置:   article > 正文

v-for中的key值的作用_v-for的key的作用

v-for的key的作用

我们都知道,vue很大的一个特点就是双向数据绑定,数据一旦改变,那么页面就会渲染新的数据呈现在页面上
对于v-for渲染的列表数据来说,数据量可能一般很庞大,而且我们经常还要对这个数据进行一些增删改操作
假设我们给列表增加一条数据,整个列表都要重新渲染一遍,那不就很费事吗,而key的出现就是尽可能的回避了这个问题,提高效率,如果我们给列表增加一条数据,页面只渲染了这个数据,那不就很完美了
v-for默认使用就地复用策略,列表数据修改的时候,他会根据可以值去判断某个值是否修改,如果修改,则重新渲染这一项,否则复用之前的元素
在这里插入图片描述
上面这种情况我们使用了 index 作为了 key 。

1.在数组后面追加一条数据
在这里插入图片描述
此时前三条数据页面不会重新渲染,直接复用之前的,只会新渲染最后一条数据,此时用 index 作为 key ,没有任何问题。

2.在数组中间插入一条数据

在这里插入图片描述
页面在去渲染数据的时候,通过 index 定义的 key 的比较,会有:

之前的数据 之后的数据

key: 0 index: 0 num: 1 key: 0 index: 0 num: 1

key: 1 index: 1 num: 2 key: 1 index: 1 num: ‘新增加的数据4’

key: 2 index: 2 num: 3 key: 2 index: 2 num: 2

key: 3 index: 3 num: 3

通过上面清晰的对比,发现除了第一个数据可以复用之前的之外,另外三条数据都需要重新渲染。
最好的办法是使用数组中不会变化的那一项作为 key 值,对应到项目中,即每条数据都有一个唯一的 id ,来标识这条数据的唯一性。

总结:

key 用于识别唯一的 Virtual DOM 元素及其驱动 UI 的相应数据。它们通过回收 DOM 中当前所有的元素来帮助 Vue 优化渲染。这些 key 必须是唯一的数字或字符串,Vue 只是重新排序元素而不是重新渲染它们。这可以提高应用程序的性能。

方便查找删除虚拟DOM 节点

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/我家小花儿/article/detail/677023
推荐阅读
相关标签
  

闽ICP备14008679号