vue学习笔记 循环中key值的应用

vue学习笔记 key值的应用

key值的应用
1、Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染，所以我们下面的例子中我们在输入框中输入值后，去改变show的值，你会发现输入框中的东西没有清空，所以我们需要给input来添加key值，表示input框是唯一独特的，上一个input和下一个input不能复用。

2、列表渲染（数组的循环和元素修改，对象的循环和元素修改）
2.1、数组的更新检测
1、关于列表渲染比较重要的一点就是要使用key值，使用key值来表明数据的唯一性，在diff算法中能够极大的提高渲染性能，这个特殊的属性相当于 Vue 1.x 的 track-by ，但它的工作方式类似于一个属性，所以你需要用 v-bind 来绑定动态值。所以循环中的key是需要加冒号的。

2、因为我们从数据库拿到数据，一般都有一个数据库中数据唯一标识id值，我们一般拿这个作为key。

3、我们修改列表不能通过下标的形式去改变列表中的数据，只能通过Vue提供的几个（1）变异方法去改变数组中的数据，或者通过（2）非变异的方式，或者通过（3）set方法。
4、template占位符：帮助我们包裹一些元素，但是在渲染的时候并不会真的渲染出来。

2.2、显示过滤/排序结果
1、有时，我们想要显示一个数组的过滤或排序副本，而不实际改变或重置原始数据。在这种情况下，可以创建返回过滤或排序数组的计算属性。

2、在计算属性不适用的情况下 (例如，在嵌套 v-for 循环中) 你可以使用一个 method 方法：

————————————————
版权声明：本文为CSDN博主「taopoppy」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_37968345/article/details/82993762