vue 虚拟dom在渲染时为了提高更新效率,不会全局刷新所有元素,而是捕捉记录需要修改的节点进行渲染。
key的作用就是标识每个不同的元素防止元素没有被重新渲染。
示例:
<template>
<div>
<template v-if="binded">
<label>Username</label>
<input placeholder="请输入Username">
</template>
<template v-else>
<label>Email</label>
<input placeholder="请输入Email">
</template>
<button @click="binded=!binded">切换</button>
</div>
</template>
<script>
export default {
name: 'key',
data () {
return {
binded: true
}
}
}
</script>
运行结果:
点击切换后:
可以看到label和input都刷新了,是这样吗?
我们在input中输入数值,查看对比:
点击切换:
我们可以看到在username中输入的数值依旧存在,事实上input并没有被刷新,被刷新的是placeholder属性。
显然我们需要的不是这种效果。我们要刷新整个input,只要对他增加key元素,为它做唯一性标识,下次vue去渲染时就能认出这两个元素了。
<div>
<template v-if="binded">
<label>Username</label>
<input placeholder="请输入Username" key="user">
</template>
<template v-else>
<label>Email</label>
<input placeholder="请输入Email" key="email">
</template>
<button @click="binded=!binded">切换</button>
</div>