key
vue官网推荐我们使用v-for时，给每一个节点元素添加一个唯一的 key，其实不只是vue，react中在执行列表渲染时也会要求给每个组件添加上key这个属性。
要了解key的作用，首先我们要简单了解一下虚拟DOM的Diff算法
vue和react都实现了一套虚拟DOM，使我们可以不直接操作DOM元素，只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Diff算法。
vue和react的虚拟DOM的Diff算法大致相同，其核心是基于两个简单的假设：
1. 两个相同的组件产生类似的DOM结构，不同的组件产生不同的DOM结构。
2. 同一层级的一组节点，他们可以通过唯一的id进行区分。
基于以上这两点假设，使得虚拟DOM的Diff算法的复杂度从O(n^3)降到了O(n)。
好吧，这样解释，似乎有点笼统了，我们来看一个例子：
我们希望可以在B和C之间加一个F，
key1.png
Diff算法默认执行起来是这样的：
key2.png
就是C更新成F，D更新成C，E更新成D，最后再插入E
所以我们需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。
key3.png
所以一句话，key的作用主要是为了高效的更新虚拟DOM
写一个案例：
<div id="app">
<ul>
没有加key
<li v-for="item in arr">
<input type="checkbox"/>{{item}}
</li>
<button @click="add">添加</button>
</ul>
<ul>
没有加key
<li v-for="item in arr" :key="item">
<input type="checkbox"/>{{item}}
</li>
<button @click="add">添加</button>
</ul>
</div>
<script>
new Vue({
data(){
return{
arr:["a","b","c","d","e"]
}
},
methods:{
add(){
this.arr.splice(2,0,'f')
}
}
}).$mount("#app")
</script>
先选中C，当没有加key的插入F的时候，选中的状态变化
key4.gif
可以看的出来，算法是直接将C变成了F
那么我们再来看下，加了key的效果：
key5.gif
加了，算法可以准确无误的在b和c之间添加了一个f
数组方法
当数据发生变化时，Vue会自动检测数据的变化，视图会发生对应的更新。
Vue中包含了一组观察数组编译的方法，使用它们改变数组也会触发视图的更新
变异方法：会改变原始数组
数组方法1.png
非变异方法：不会改变原始数组，但是会返回一个新数组
- fliter()
- slice()
- concat()
<div id="app">
<ul>
<li v-for="item in arr" :key="item">{{item}}</li>
<button @click="add()">添加</button>
</ul>
</div>
<script>
new Vue({
data(){
return{
arr:["王者荣耀","绝地求生","c","d","e"]
}
},
methods:{
add(){
// push
// this.arr.push("全军出击", "aa0", "bb");
// pop
// this.arr.pop()
// shift 删除数组中的第一个元素
// this.arr.shift()
//
// this.arr.unshift("123")
// this.arr.splice(1,2)
// this.arr.splice(1,0, "456","567")
// this.arr.splice(1,2, "456","567")
// 这样修改数组中的元素，视图是不会更新的
// this.arr[1] = "999"
// 使用vue的set方法更新
// 全局set
// Vue.set(this.arr, 1, "999")
// 当前实例set
this.$set(this.arr, 1, "888")
}
}
}).$mount("#app")
</script>
直接修改数组中的元素，视图是不会更新的，需要用到Vue中的set方法
// 这样修改数组中的元素，视图是不会更新的
// this.arr[1] = "999"
// 使用vue的set方法更新
// 全局set
// Vue.set(this.arr, 1, "999")
// 当前实例set
this.$set(this.arr, 1, "888")
网友评论