属性"/>
Vue 3 迁移策略笔记—— 第17节:Key 属性
前言
本笔记主要基于官方文档《迁移策略—— key attribute》汇总而来。如有理解出入,请以官方文档为主。建议您以官方文档为主,本文为辅。这样您可以“以自己为主”审视的阅读,从而不被我的观点带偏。
概述
- Vue 3.x 给
v-if
/v-else
/v-else-if
分支添加key
属性不再是必须的了。因为在 Vue 3.x 中,Vue 会自动生成唯一key
。 - 对
<template v-for>
的key
应该添加到<template>
标签中,而不是放在其子标签中。
Key 属性的介绍
key
属性主要用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes。如果不使用 key,Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时,它会基于 key 的变化重新排列元素顺序,并且会移除 key 不存在的元素。有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。
摘抄自——《Vue.js API——特殊 attribute:key》
此外,还可以查看《 Maintaining State 》了解Vue 3.x 渲染机制,进一步理解
key
的作用。
条件分支的key
条件分支:即由
v-if
/v-else
/v-else-if
可控制的代码块
在 Vue 2.x,建议在 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>
到了 Vue 3.x,我们仍然可以像上面那样做。但是,这个做法不再被推荐使用了。因为Vue 3.x 会自动为条件分支生成唯一的 key
。
<!-- Vue 3.x -->
<div v-if="condition">Yes</div>
<div v-else>No</div>
<template v-for>
的 key
在 Vue 2.x,<template>
标签不能添加key
属性。取而代之的是在其子元素上添加key
。如下:
<!-- Vue 2.x -->
<template v-for="item in list"><div :key="item.id">...</div><span :key="item.id">...</span>
</template>
到了 Vue 3.x,key
则应该被设置在 <template>
标签上。
<!-- Vue 3.x -->
<template v-for="item in list" :key="item.id"><div>...</div><span>...</span>
</template>
本系列目录
-
Vue 3 迁移策略笔记—— 第1节:v-for 中的 Ref 数组
-
Vue 3 迁移策略笔记—— 第2节:Async Components 异步组件
-
Vue 3 迁移策略笔记—— 第3节:Attribute Coercion Behavior (属性强制行为)
-
Vue 3 迁移策略笔记——第4节:$attrs 包括class&style
-
Vue 3 迁移策略笔记—— 第5节:移除 $children
-
Vue 3 迁移策略笔记—— 第6节:自定义指令
-
Vue 3 迁移策略笔记—— 第7节:自定义元素交互
-
Vue 3 迁移策略笔记—— 第8节:Data 选项
-
Vue 3 迁移策略笔记—— 第9节:新增 emits 选项
-
Vue 3 迁移策略笔记—— 第10节:事件 API
-
Vue 3 迁移策略笔记—— 第11节:移除过滤器
-
Vue 3 迁移策略笔记—— 第12节:片段
-
Vue 3 迁移策略笔记—— 第13节:函数式组件
-
Vue 3 迁移策略笔记—— 第14节:全局 API
-
Vue 3 迁移策略笔记—— 第15节:全局 API 的 tree shaking
-
Vue 3 迁移策略笔记—— 第16节:Inline Template 属性
-
Vue 3 迁移策略笔记—— 第17节:Key 属性
-
Vue 3 迁移策略笔记—— 第18节:按键修饰符
-
Vue 3 迁移策略笔记—— 第19节:移除 $listeners
-
Vue 3 迁移策略笔记—— 第20节:Props 的默认值函数不能访问this
-
Vue 3 迁移策略笔记—— 第21节:渲染函数 API
-
Vue 3 迁移策略笔记—— 第22节:Slots 的统一
-
Vue 3 迁移策略笔记—— 第23节:Transition Class 的变化
-
Vue 3 迁移策略笔记—— 第24节:Transition Group 不再需要设置根元素
-
Vue 3 迁移策略笔记—— 第25节:v-on.native修饰符被移除
-
Vue 3 迁移策略笔记—— 第26节:在组件上使用 v-model 的变化
-
Vue 3 迁移策略笔记—— 第27节:v-if 和 v-for 的优先级
-
Vue 3 迁移策略笔记—— 第28节:v-bind 合并行为
-
Vue 3 迁移策略笔记—— 第29节:数组的监听
更多推荐
Vue 3 迁移策略笔记—— 第17节:Key 属性
发布评论