key和数组方法

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")