Vue.set()

现象

我们知道, 下面两种操作, 不会触发视图更新:

1. 根据索引修改数组某项
2. 给对象新增属性

const vm = new Vue({
 data: {
  arr: [1, 2],
  obj: {
    a: 3
  }
 }
});
vm.arr[0] = 3; // 这种操作页面不会重新渲染
vm.obj.b = 3;  // 这种操作页面不会重新渲染

数组和对象set之后区别

区别在于,:

• 对数组进行set改变属性后, 下次直接用索引操作依旧不会触发更新视图, 还是需要set
• 而对对象用set新增属性后, 该属性就是响应式的了

官网上说

Vue 将被侦听的数组的变异方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：
push()
pop()
shift()
unshift()
splice()
sort()
reverse()

Vue对数组增加了一层原型, 即Vue中调用splice, push等这些方法时, 读取的是Vue定义的一层原型上的方法, 可以触发页面的重新渲染, 而非Array原型上的方法, Vue.set()对于数组的处理其实就是调用了splice方法触发响应, 而对象调用set时, 是为新增属性添加依赖收集, 所以对于对象来说, 第二次不必再使用set.