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

写一个案例：

 

     

         没有加key
         

             {{item}}
         
         添加
     

     

         没有加key
         

             {{item}}
         
         添加
     

先选中C，当没有加key的插入F的时候，选中的状态变化

key4.gif

可以看的出来，算法是直接将C变成了F

那么我们再来看下，加了key的效果：

key5.gif

加了，算法可以准确无误的在b和c之间添加了一个f

数组方法

当数据发生变化时，Vue会自动检测数据的变化，视图会发生对应的更新。

Vue中包含了一组观察数组编译的方法，使用它们改变数组也会触发视图的更新

变异方法：会改变原始数组

数组方法1.png

非变异方法：不会改变原始数组，但是会返回一个新数组

• fliter()
• slice()
• concat()

    

        
{{item}}
        添加
    

直接修改数组中的元素，视图是不会更新的，需要用到Vue中的set方法

// 这样修改数组中的元素，视图是不会更新的
// this.arr[1] = "999"

// 使用vue的set方法更新
// 全局set
// Vue.set(this.arr, 1, "999")

// 当前实例set
this.$set(this.arr, 1, "888")