标签
note
字数
503 字
阅读时间
3 分钟
key 主要作为虚拟 DOM 算法的提示，用于比较新旧节点列表时识别 vnode
- 在没有 key 的情况下，Vue 将使用一种最小化元素移动的算法，并尽可能地就地更新/复用相同类型的元素
- 如果传了 key，则将根据 key 的变化顺序来重新排列元素，并且将始终移除/销毁 key 已经不存在的元素
——同一个父元素下的子元素必须具有唯一的 key。重复的 key 将会导致渲染异常
v-for
key 的作用主要是为了高效的更新虚拟 dom
假设数组元素原先是 [1,2,3,4] ，当数组变成 [0,1,2,3,4] 时，原先的 dom 结构会一步一步的往后移动，而如果使用了 key 后，会直接在数组元素 1 前插入 0
transition 的过渡动画
vue
<transition>
<span :key="text">{{ text }}</span>
</transition>key 做标识后，绑定的 span 元素便具有唯一性，当 text 变化后，会移除旧 key 的 span，新 key 的 span 出现，触发 transition 的渲染
input 的使用
vue
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address">
</template>那么在上面的代码中切换 loginType 将不会清除用户已经输入的内容。因为两个模版使用了相同的元素，< input > 不会被替换掉——仅仅是替换了它的 placeholder
v-for 中 key 的误区
- 千万别用随机数作为 key，不然旧节点会被全部删掉，新节点重新创建
- 用 index 作为 key，不管你数组的顺序怎么颠倒，index 都是 0, 1, 2 这样排列，导致 Vue 会复用错误的旧子节点，做很多额外的工作
参考
vue 中 key 的作用和工作原理 - 掘金
Vue 中不要用 index 作为 key，key的用途 - 掘金
贡献者
jiechen