这周做一个递归的组件，涉及到了子组件的增加删除，没有key时候操作之后数据视图总是不一致，所以今天重新详细看了一下vue3 key的用法
在以前的 Vue 版本中，我们在使用 v-if/v-else/v-else-if 进行条件分支时，通常建议给每个分支添加一个 key 属性。
比如，在 Vue 2.x 中：
htmlCopy Code
<!-- Vue 2.x -->
<div v-if="condition" key="yes">是</div>
<div v-else key="no">否</div>
但是在 Vue 3.x 中，这种做法变了。现在，在条件分支上可以不再手动添加 key 属性，因为 Vue 会自动为每个分支生成唯一的 key。
所以，在 Vue 3.x 中，我们可以简化代码，直接写：
htmlCopy Code
<!-- Vue 3.x -->
<div v-if="condition">是</div>
<div v-else>否</div>
这样就不需要手动添加 key 属性了。
但是如果你之前已经在分支上手动添加了 key 属性，那么每个分支都必须使用不同的 key 值。在大多数情况下，你可以直接删除这些手动添加的 key，因为 Vue 会自动生成唯一的 key。
比如，在 Vue 2.x 中：
htmlCopy Code
<!-- Vue 2.x -->
<div v-if="condition" key="a">是</div>
<div v-else key="a">否</div>
在 Vue 3.x 中，我们推荐你直接删除这些 key 属性：
htmlCopy Code
<!-- Vue 3.x -->
<div v-if="condition">是</div>
<div v-else>否</div>
如果你坚持要使用 key 属性，那么请确保每个分支上的 key 值是唯一的。
另外，在使用 <template v-for> 进行列表渲染时，也有一些变化。
在 Vue 2.x 中，<template> 标签不能添加 key 属性，而是需要将 key 添加到每个子元素上。
比如：
htmlCopy Code
<!-- Vue 2.x -->
<template v-for="item in list">
<div :key="'heading-' + item.id">...</div>
<span :key="'content-' + item.id">...</span>
</template>
但是在 Vue 3.x 中，我们应该将 key 属性放在 <template> 标签上。
所以，在 Vue 3.x 中，我们可以这样写：
htmlCopy Code
<!-- Vue 3.x -->
<template v-for="item in list" :key="item.id">
<div>...</div>
<span>...</span>
</template>
类似地，当在使用 <template v-for> 结合带有 v-if 的子元素时，也需要将 key 属性移到 <template> 标签上。
比如，在 Vue 2.x 中：
htmlCopy Code
<!-- Vue 2.x -->
<template v-for="item in list">
<div v-if="item.isVisible" :key="item.id">...</div>
<span v-else :key="item.id">...</span>
</template>
在 Vue 3.x 中，需要写成这样：
htmlCopy Code
<!-- Vue 3.x -->
<template v-for="item in list" :key="item.id">
<div v-if="item.isVisible">...</div>
<span v-else>...</span>
</template>
