(四)vue3之key值绑定

我们知道，key值在vue中是非常重要的，可以在dom diff中提高dom的可复用性。那么在vue2和vue3中的使用有什么不同呢？

• 1.在v-if/v-else/v-else-if中，key值绑定不再是必须的，因为vue3会自动生成对应的唯一key值
• 2.如果你在vue3中（如v-if）手动绑定key值，那么其他对应指令中（如v-else）也必须手动绑定key值
• 3.<template v-for>中的key值应该绑定在<template>中而不再绑定在它的子元素中

1.v-if/v-else/v-else-if中的key值

在vue2中，我们推荐在v-if/v-else/v-else-if中绑定key值，如下：

<!-- Vue 2.x -->
<div v-if="condition" key="yes">Yes</div>
<div v-else key="no">No</div>

但是，在vue3中，我们不在需要手动绑定key值，因为vue3会自动生成唯一的key值，如下：

<!-- Vue 3.x -->
<div v-if="condition">Yes</div>
<div v-else>No</div>

如果我们在vue3中手动绑定了key值，那么每一个分支都必须绑定唯一的key值，如下：

<!-- 没有手动绑定key值的时候 -->
<div v-if="condition">Yes</div>
<div v-else>No</div>

<!-- 手动绑定key值的时候，其他分支也必须绑定key值 -->
<div v-if="condition" key="a">Yes</div>
<div v-else key="b">No</div>

2.<template>使用v-for中的key值

在vue2中，<template>不能绑定key值，而是绑定在它的子元素身上，如下：

<!-- Vue 2.x -->
<template v-for="item in list">
  <div :key="item.id">...</div>
  <span :key="item.id">...</span>
</template>

在vue3中，key值应该绑定在<template>上而不是它的子元素，如下：

<!-- Vue 3.x -->
<template v-for="item in list" :key="item.id">
  <div>...</div>
  <span>...</span>
</template>

2.<template v-for>和v-if/v-else/v-else-if一起使用的key值

在vue3中，如果template使用了v-for，并且它的子元素中使用了v-if/v-else/v-else-if，那么key值也需要绑定在template上，如下：

<!-- 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 -->
<template v-for="item in list" :key="item.id">
  <div v-if="item.isVisible">...</div>
  <span v-else>...</span>
</template>