模板指令-key属性变化
- 新增：对于v-if/v-else/v-else-if的各分支项，key将不再是必须的，因为vue3会自动生成唯一的key
- 非兼容：如果你手动提供了key，那么每个分支必须使用唯一的key，不能通过故意使用相同的key来强制使用分支
- 非兼容：<template v-for>的key应该设置在<template>标签上，而不是他的子节点上
在条件分支中key使用
v-if/v-else/v-else-if的各分支项仍可以继续使用key，但是我们不再建议在条件分支中继续使用key，因为没有为条件分支提供唯一的key时，vue3会自动生成唯一的key
<body>
<div id="app">
<button @click="tag">切换</button>
<div v-if="isShow" key="a">
姓名<input type="text">
</div>
<div v-else key="b">
年龄<input type="text">
</div>
</div>
<script>
let {createApp,ref}=Vue;
createApp({
setup(){
const isShow=ref(true)
function tag(){
isShow.value=!isShow.value;
}
return {isShow,tag}
}
}).mount("#app")
</script>
</body>
此时我们输入内容点击切换之后之后，年龄输入框显示，我们在输入内容点击切换到姓名提示框空的
vue3中回味我们提供唯一的key，我们可以不使用key
<div id="app">
<button @click="tag">切换</button>
<div v-if="isShow" >
姓名<input type="text">
</div>
<div v-else >
年龄<input type="text">
</div>
</div>
此时效果是一样的
非兼容变更如果你手动提供了key，那么每个分支都必须使用一个唯一的key
使用相同的key会发出警告，为了避免发出警告，大多数情况下都不需要设置key
<div id="app">
<button @click="tag">切换</button>
<div v-if="isShow" key="a">
姓名<input type="text">
</div>
<div v-else key="a">
年龄<input type="text">
</div>
</div>
<template v-for>的key应该设置在<template>标签上，而不是他的子节点上
<body>
<div id="app">
<ul>
<!-- key值需要设置到template标签上 -->
<template v-for="item in arr" :key="item.id">
<li>{{item.task}}</li>
</template>
</ul>
</div>
<script>
let {createApp,ref}=Vue;
createApp({
setup(){
const arr=[
{id:1,task:"学习",done:true},
{id:2,task:"打游戏",done:false},
{id:3,task:"玩手机",done:true},
{id:4,task:"吃饭",done:false},
]
return {arr}
}
}).mount("#app")
</script>
</body>
如果此时将key的值设置在li上
<li :key="item.id">{{item.task}}</li>
此时也会加载但是会有警告，警告内容为key值应该放到template标签上
当使用<template v-for>上存在使用v-if的子节点，key还是设置到template标签上
<div id="app">
<ul>
<!-- key值需要设置到template标签上 -->
<template v-for="item in arr" :key="item.id">
<li v-if="item.done" class="todos">{{item.task}}</li>
<li v-else class="dones">{{item.task}}</li>
</template>
</ul>
</div>
如果我们把key值放到子节点上就会弹出一个警告，分支必须使用唯一的key
<li v-if="item.done" class="todos" :key="item.id">{{item.task}}</li> <li v-else class="dones" :key="item.id">{{item.task}}</li>
