主要记录：
一、 有key和没key的差异
二、 key的作用
三、 相关demo代码
一、有key和没key的差异
1、without key:
no key.gif
当选中青丘白浅时，input添加一个新值(比如离镜)后选中是“离镜”，并不是我们想要的结果，我们想要的是当添加“离镜”后，选中的是青丘白浅。
2、with key:
key.gif
加了key之后，相同操作，选中青丘白浅，添加“离镜”后依旧选中的是青丘白浅，是我们理想的效果。
（demo的相关代码在文末~）
3、原理:
在我们进行添加数据后，vue内部时通过Diff算法对虚拟DOM进行更新，从而进行页面数据更新渲染。
的。
（1）diff算法原理-BC之间插入一个F节点：
①diff算法原理-BC之间插入一个F节点.png
（2）Diff插入一个节点时默认操作：
②Diff插入一个节点时默认操作.png
Diff算法插入节点的默认操作如图②，并没有准确地追踪F节点，将其放在准确位置。
（3）Diff加key唯一标识：
为了能把F节点放在准确位置，我们给F节点添加一个key值来作为唯一标识。有了key，Diff算法就可以正确识别F节点并把它插入正确的位置。
③Diff加key后正确插入节点.png
了解Diff原理之后，前面with key青丘白浅的例子应该就更通俗易懂了。
二、key的作用
"为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性"--Vue官网
:key="唯一标识" ,唯一标识可以是item里面id index等,key的作用主要是为了高效的更新虚拟DOM。
可以这样理解：v-for加key是为了添加唯一标识，让Diff算法可以正确识别节点并把它插入正确的位置，提高Vue对虚拟DOM的更新效率。
三、相关demo代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>:key</title>
<style>
li {
list-style: none;
}
</style>
</head>
<body>
<div id="app">
<div>
<h3>没有:key</h3>
<input type="text" v-model="name" v-on:keyup.enter="add">
<button @click="add">添加</button>
<ul>
<li v-for="(item,i) in list">
<input type="checkbox">{{item.name}}
</li>
</ul>
<p>解释：当选中青丘白浅时，input添加一个新值(比如离镜)后选中的确是“离镜”，并不是我们想要的结果，我们想要的是当添加“离镜”后，一种选中的是青丘白浅</p>
</div>
<hr>
<div>
<h3>有:key</h3>
<input type="text" v-model="name" v-on:keyup.enter="add">
<button @click="add">添加</button>
<ul>
<li v-for="(item,i) in list" :key="item.id">
<input type="checkbox">{{item.name}}
</li>
</ul>
<p>解释：同样当选中青丘白浅时，添加“离镜”后依旧选中的是青丘白浅。</p>
<p>:key="唯一标识" ,唯一标识可以是item里面id index等,key的作用主要是为了高效的更新虚拟DOM</p>
<p>"为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性"--官网</p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var app = new Vue({
el: "#app",
data: {
name: '',
newId: 3,
list: [
{ id: 1, name: '青丘白浅' },
{ id: 2, name: '夜华' },
{ id: 3, name: '墨渊' }
]
},
methods: {
add: function () {
this.list.unshift({ id: ++this.newId, name: this.name })
this.name = ''
}
},
})
</script>
</body>
</html>
未完待续。。。
不定期更新笔记的日常~欢迎给♥
网友评论