key的作用
如果不使用 key,Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key,它会基于 key 的变化重新排列元素顺序,并且会移除 key 不存在的元素。
使用Key
<div id="container">
<ul>
<li v-for = "(item, index) in arr" :key="item">{{item}}</li>
</ul>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: '#container',
data() {
return {
arr:[1,2,3,4]
}
}
});
document.onclick = () => {
let li = document.getElementsByTagName('li')[0].style.color = 'red';
vm.arr.reverse();
}
</script>
直接移动DOM,我们可以发现,之前变色的1被移动到了最底下。
不使用key
不改变原来的dom,而是直接修改里面的文本。
举个不使用key的其他🌰
<template v-if="isShow">
<span>input:</span>
<input type="text">
</template>
<template v-else>
<span>input:</span>
<input type="text">
</template>
如果这里不使用key,isShow更改为false,输入框的内容不会更新,因为vue会默认这两个输入框相同。
官方文档推荐使用key的场景
它也可以用于强制替换元素/组件而不是重复使用它。当你遇到如下场景时它可能会很有用:
- 完整地触发组件的生命周期钩子
- 触发过渡
例如:
<transition>
<span :key="text">{{ text }}</span>
</transition>
如果这里不使用key的话,text发生变化仅改变内部的值,而不替换元素。
使用index作为key值带来的问题
<div id="container">
<ul>
<li v-for = "(item, index) in arr" :key="index">{{item}}</li>
</ul>
</div>
会出现跟不使用key值相同的情况。归根结底还是因为每个li的key发生了改变,触发了强制更新。
因此在这个场景下,使用key值能够节省性能。