Vue.js 关键点在Vue中究竟什么时候有用？

即使在阅读了文档之后，我仍然不太了解密钥的使用，但我明白这与保持每个项目的唯一性有关。我只在使用

v-for

时添加了一个键，并且只添加到最外层的父对象（而不是

v-for

的子对象）。是否还有其他情况需要使用

键

<div v-for="(person,index) in people" :key="index>
    <div class="name-label>
       <img :src="person.img/>
       <div> {{ person.name }} </div>
    </div>
</div>


{{person.name}
与
v-for
一起的
键
指令用于唯一标识在
v-for
操作中呈现的每个父元素

同样的情况也发生在Reactjs中：

{elements.map((value, index) => {
   return <li key={index}>{value}</li>
})}

{elements.map（（值，索引）=>{
返回
{value}
})}

Vuejs中的
key
指令还用于强制Vuejs每次重新呈现包含它的元素
：key
接收到新值。
正如@firmino changani所指出的，如果希望Vue强制重新呈现或替换元素或组件，则
key
的其他用法是。请参阅
key
特殊属性但是：

它还可用于强制更换元件/组件
而不是重复使用。当您想要：


正确触发组件的生命周期挂钩
触发转换，例如：

从vueJs文档中，围绕关键点：
关键特殊属性主要用于提示Vue的虚拟DOM算法在将新节点列表与旧节点列表进行区分时识别VNode。

简单地说，如果通过For循环呈现一个div，那么该div将与其他div完全相同。当用户单击其中一个div并实例化@click函数时，VUEJ如何知道这些div之间的区别？如果删除中间div，vue如何知道如何按正确顺序重新排序这些div

VueJs使用该键了解在对For循环中的其中一个对象执行操作时如何重新排序DOM。

这里有一篇文章全面解释了vueJs密钥，以及关于vueJs反应性引擎的更多详细信息，这是一个很好的了解：
我认为文档对它进行了很好的介绍。请看这篇文章。它用于帮助vue的扩散算法，以便在进行更新时尽可能多地重用DOM，并确保它正在删除/更改co正确的元素。@dippas你是做什么的mean@HayleeGal58我认为这是@dippas的幽默尝试……指的是你的打字错误
，而不是
，你没有在这里关闭属性
：key=“index>
，
：src=“person.img/>
和
class=“name label>
<transition>
 <span :key="text">{{ text }}</span>
</transition>

<template>
 <page>
   <add-data-popup @save="myKey++" />
   <show-data :key"myKey" />
 </page>
</template>