key的原理和作用
key 作用 :用来作为数据的唯一标识
key原理：vue中的key其实存在着一种diff算法，也正是这个diff算法，使得页面在被渲染时更加高效，什么是diff算法，其实是一种虚拟DOM算法，就是将新的虚拟DOM与重新渲染的虚拟DOM进行一个对比 vue中的key属性就是按照这个key的值来一一对比。如果匹配到一样的Node节点会便不会重新使用新的虚拟DOM进行渲染，而是采用原有虚拟DOM结构。
情景一
在使用v-for时不使用key属性（其实vue会将其默认将索引作为key的唯一标识）
下面通过一个小例子来说一下不加key的弊端或者是使用索引作为key的值的弊端
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>key的作用以及原理</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(list,index) in userinfo">{{list.username +"-"+ list.age}}</li>
</ul>
<button @click="add">点击添加信息</button>
</div>
<script type="text/javascript">
const vm = new Vue({
el: "#app",
data: {
msg:{username:"枫叶在飘呀",age:23},
userinfo: [{
username: "张三",
age: 17
}, {
username: "李四",
age: 17
}, {
username: "王五",
age: 17
}]
},
methods:{
add() //用来点击向userinfo头部添加一条数据
{
this.userinfo.unshift(this.msg)
}
}
})
</script>
</body>
</html>
以上便是不是用key属性或者使用索引会出现的情况
情景二
使用数组中的唯一标识还会出现那样的情况吗？
我们可以给上面的数据加一个id作为唯一标识
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>key的作用以及原理</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(list,index) in userinfo" :key="list.id">{{list.username +"-"+ list.age}}<input type="text" /></li>
</ul>
<button @click="add">点击添加信息</button>
</div>
<script type="text/javascript">
const vm = new Vue({
el: "#app",
data: {
msg:{username:"枫叶在飘呀",age:23},
userinfo: [{
id:1
username: "张三",
age: 17
}, {
id:2
username: "李四",
age: 17
}, {
id:3
username: "王五",
age: 17
}]
},
methods:{
add()
{
this.userinfo.unshift(this.msg)
}
}
})
</script>
</body>
</html>
总结一下使用key的优点
1.可以确定数据的唯一标识，可以通过唯一标识找到整条数据
2.可以减少DOM结构重新渲染，提高性能,因为它会有一个虚拟DOM对比算法，未发生变化的值，使用原有的虚拟DOM结构，如果有被重新渲染后的数据才会被重新渲染。
~相信你也体会到key的强大作用了吧~