26、VUE中演示v-for为什么要加key
发布时间
阅读量：
阅读量
说到这个问题想必要举个例子了
没有key
<div id="app">
<div>
<input type="text" v-model="name">
<button @click="add">添加</button>
</div>
<ul>
<li v-for="(item, i) in list">
<input type="checkbox"> {{item.name}}
</li>
</ul>
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
name: '',
newId: 3,
list: [
{ id: 1, name: '李斯' },
{ id: 2, name: '吕不韦' },
{ id: 3, name: '嬴政' }
]
},
methods: {
add() {
//注意这里是unshift
this.list.unshift({ id: ++this.newId, name: this.name })
this.name = ''
}
}
});
</script>
</div>当选择吕不为时
添加了楠楠之后所选中的是李斯，并非我们的预期。
我们的预期是当我们在列表中添加了楠楠之后
有key
<div id="app">
<div>
<input type="text" v-model="name">
<button @click="add">添加</button>
</div>
<ul>
<li v-for="(item, i) in list" :key="item.id">
<input type="checkbox"> {{item.name}}
</li>
</ul>
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
name: '',
newId: 3,
list: [
{ id: 1, name: '李斯' },
{ id: 2, name: '吕不韦' },
{ id: 3, name: '嬴政' }
]
},
methods: {
add() {
//注意这里是unshift
this.list.unshift({ id: ++this.newId, name: this.name })
this.name = ''
}
}
});
</script>
</div>同样当选中吕不为时，添加楠楠后依旧选中的是吕不为。
从技术实现的角度来看，在检查表中为每个checkbox添加了一个唯一的key和一个对应的id后，并实现了与内容之间的关联关系。
查过相关文档，图例说明很清晰。
Vue和React的虚拟DOM中的Diff算法基本上相同；它们都建立在两条基本假设的基础上。下面介绍diff算法的具体处理流程。通过比较操作前后dom树中处于同一层级的所有节点来实现逐层分析。
注：此部分为改写内容
我们希望可以在B和C之间加一个F，Diff算法默认执行起来是这样的：
即把C更新成F，D更新成C，E更新成D，最后再插入E，是不是很没有效率？
我们希望为每个节点分配一个独特的标识符，在此过程中Diff算法能够准确地识别出该节点的位置从而定位并插入新的节点到适当的位置区中。
在Vue中进行列表循环时需要添加：key='唯一标识'。可以选择item中的id、索引或其他形式作为唯一标识。由于Vue组件高度复用的原因，在添加key时能够确保每个组件具有唯一的身份。通过这种方式，在更新虚拟DOM时能够实现高效且精准的操作。
全部评论 (0)
还没有任何评论哟~