vue v for key,你知道vue中key的原理吗?说说你对它的理解
为了给Vue一个提示，让它可以跟踪每个节点的身份，从而重用和重新排序现有的元素，您需要为每个项目提供一个唯一的key属性。下面这篇文章主要介绍了v-for中key的真实作用，Vue深有体会，供大家参考。
目录
前言1: key使用索引2: key使用唯一ID进行汇总。
前言
大家都知道，在v-for中有两种最常用的绑定key的方法：
第一个使用索引，第二个使用唯一id。然后，笔者将用几个小案例来描述两种方法在渲染上的明显区别。
第一种： key 采用 index
我们先来看代码。
模板
div class=root
div class=item v-for=(item，index) in list :key=index
h2{{ item.text }}/h2
/div
Button @click=replaceData 替换数据/button
/div
/模板
脚本
导出默认值{
data() {
返回{
列表：[
{text: 33333}，
{text: 66666}，
{text: 99999}，
]
}
},
方法：{
replaceData() {
this.list=[
{text: 22222}，
{text: 44444}，
{text: 88888}，
]
}
}
}
/脚本
样式lang=scss 。项目{背景：橙色；}
/风格
这里，我们呈现列表数组，使用index作为键，然后添加一个替换数据按钮事件。来看看效果吧。
当我们单击“替换数据”按钮时，数据会变成这样。
一切看起来都很正常，对吧？接下来才是重点。我们必须做一些小的改变。首先，我们刷新页面以将数据恢复到原始数据，然后我们手动删除第二个数据。
现在只剩下3333和99999了。这时候我们点一下替换数据，看看有什么作用。
啧啧，只替代了第一条和第三条。原来的第二篇文章刚刚被我们删了，导致44444没有被渲染。为什么？其实很简单。因为替换数据的数组的索引和第一个数组的索引是一样的，为什么Vue判断是一样的之后还需要创建Dom，所以不会为第二个重新创建Dom。这就是索引作为一个键的作用。
注意：表面视图没有改变，但是数据已经更新。当你访问列表时，仍然有三个数据2222、44444和8888在里面。只要记住Vue是数据驱动的而不是视图。
第二种：key 采用唯一 ID
接下来，我们来看看第二个。代码如下所示
模板
div class=root
div class= item v-for=(item)in list :key= item . id
h2{{ item.text }}/h2
/div
Button @click=replaceData 替换数据/button
/div
/模板
脚本
导出默认值{
data() {
返回{
列表：[
{text: 33333 ，id: 1}，
{text: 66666 ，id: 2}，
{文本：“99999”，id: 3}，
]
}
},
方法：{
replaceData() {
this.list=[
{text: 22222 ，id: 4}，
{text: 44444 ，id: 5}，
{文本： 88888 ，id: 6}
]
}
}
}
/脚本
样式lang=scss 。项目{背景：橙色；}
/风格
代码与上面类似，除了id被添加并绑定到键，
接下来，我们来过一遍上面的流程，看看这次有什么不同。
聪明的你已经看到了删除第二项后，点击变更数据会生成三个新项而不是两个。相信你也明白其中的原理。替换数据的批次id与之前的批次不同，因此Vue将在比较并找到差异后帮助我们生成新的Dom。
以上就是使用索引和唯一id的明显区别。
另外，比如unique id多于上面的绑定方法，我们也可以在v-for中使用：key=Math.random()来生成unique id，但是会有一些细微的区别，这里就不举例了。至于哪个键可以用来提升性能，并不是本章的初衷。读者可以自行在网上搜索。我相信只要你能明白以上两个绑定键的区别，
总结
关于key在Vue深入理解v-for中的真实作用的文章到此为止。关于Vuev-for中key的作用的更多信息，请搜索我们以前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。