我们知道,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>
Logo

前往低代码交流专区

更多推荐