@TOC
本节内容:在日常开发中,经常会使用
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 不存在的元素。