今天完成的事情

 复习，准备复盘

明天的计划

 看接口，建框架，做方案评审

遇到的问题

收获

Vue 数组/对象更新 视图不更新

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

     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 不能检测以上数组的变动，以及对象的添加/删除，很多人会因为像上面这样操作，出现视图没有更新的问题。

解决方式:

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

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

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

或者使用数组原生方法触发视图更新:

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

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

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

替换数组/对象

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

   // 文档中的栗子: filter遍历数组，返回一个新数组，用新数组替换旧数组

    example1.items = example1.items.filter(function (item) {

      return item.message.match(/Foo/)

    })

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

&&"操作符

“&&”连接两个表达式，当两侧表达式都为真时，返回TRUE。有一个为假则返回FALSE。

那么实际运行时，JavaScript到底是怎么执行判断的？？？

如果左侧的表达式为FALSE，那么整个表达式的结果一定为FALSE。所以此时JavaScript不会对右侧的表达式进行判断。

比如：

console.log(0&&null.b)

这个表达式不会报错，因为不会执行到null.b这里。

理解了这点，“&&”操作符就可以帮我们偷懒了。

if(a==b){console.log(1)}

现在这段代码可以改写成这样：

a==b&&console.log(1)