vue-数组/对象更新 视图不更新 this.$set

情况

很多时候，我们习惯于这样操作数组和对象:

     data() { // data数据
        return {
          arr: [1,2,3],
          obj:{
              a: 1,
              b: 2
          }
        };
      },
   // 数据更新 数组视图不更新
    this.arr[0] = 'OBKoro1';
    this.arr.length = 1;
    console.log(arr);// ['OBKoro1'];
    // 数据更新 对象视图不更新
    this.obj.c = 'OBKoro1';
    delete this.obj.a;
    console.log(obj);  // {b:2,c:'OBKoro1'}

由于js的限制，Vue 不能检测以上数组的变动，以及对象的添加/删除

很多人会因为像上面这样操作，出现视图没有更新的问题。

解决方式

1. this.$set(你要改变的数组/对象，你要改变的位置/key，你要改成什么value)

   this.$set(this.arr, 0, "OBKoro1"); // 改变数组
   this.$set(this.obj, "c", "OBKoro1"); // 改变对象

如果还是不懂的话，可以看看这个codependemo。

2. 数组原生方法触发视图更新:

Vue可以监测到数组变化的，数组原生方法:

    splice()、 push()、pop()、shift()、unshift()、sort()、reverse()

意思是使用这些方法不用我们再进行额外的操作，视图自动进行更新。

推荐使用splice方法会比较好自定义,因为slice可以在数组的任何位置进行删除/添加操作，这部分可以看看我前几天写的一篇文章:【干货】js 数组详细操作方法及解析合集

3. 替换数组/对象

比方说:你想遍历这个数组/对象，对每个元素进行处理，然后触发视图更新。

   // 文档中的栗子: filter遍历数组，返回一个新数组，用新数组替换旧数组
    example1.items = example1.items.filter(function (item) {
      return item.message.match(/Foo/)
    })

举一反三：可以先把这个数组/对象保存在一个变量中，然后对这个变量进行遍历，等遍历结束后再用变量替换对象/数组。