本节内容：在日常开发中，经常会使用v-for进行遍历，但是每次使用其时，都要被强制的加上key，那么key究竟起着什么样的作用？话不多说，我们先看一个案例
一、案例
源码：
<div>
<input type="text" v-model='name'>
<button @click='add'>添加</button>
</div>
<ul>
<li v-for='(item, i) in nameList' :key='item.id'>
<input type="checkbox"> {{item.name}}
</li>
</ul>
</div>
<script>
const HelloVueApp = {
components: {
getTitleComponent,
toDoList
},
data() {
return {
bookTitle: '',
selectVal: '',
nameList: [
{ id: 1, name: '张三' },
{ id: 2, name: '李四' },
{ id: 3, name: '王五' }
],
name: '',
newId: 3
}
},
methods: {
add () {
// 注意是 unshift 添加，将在头部添加元素
this.nameList.unshift({id: ++this.newId, name: this.name})
this.name = ''
}
}
}
Vue.createApp(HelloVueApp).mount('#app')
</script>1、不加key值时
2、加key值时
- 通过以上两个结果我们可以看出，当我们没加key值时，没有 key 属性，状态默认绑定的是位置；加上key值有 key 时，状态根据key的值绑定到了相应的数组元素上
- vue组件高度复用增加Key可以标识组件的唯一性，为了更好地区别各个组件 ，key的作用主要是为了高效的更新虚拟DOM。
- 由于key的唯一性，尽量把id作为key值。index索引的话因为并不具有唯一性，不能作为key值
Vue中这样说道：维护状态，当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。
在Key的语法当中我们得知：特殊 attribute 主要用做 Vue 的虚拟 DOM 算法的提示，以在比对新旧节点组时辨识 VNodes。如果不使用 key，Vue 会使用一种算法来最小化元素的移动并且尽可能尝试就地修改/复用相同类型元素。而使用 key 时，它会基于 key 的顺序变化重新排列元素，并且那些使用了已经不存在的 key 的元素将会被移除/销毁。
- 一张图带你更深入的理解,如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。
