vue.js 中 $set 使用场景、解决方案比较、原理

使用场景：

实例创建之后添加新的属性到实例上，它不会触发视图更新。

由于 JavaScript 的限制，Vue 不能检测以下变动的数组。

当利用索引直接设置数组的某一项时，例如：vm.items[indexOfItem] = newValue 

当你修改数组的长度时，例如：vm.items.length = newLength，不会更新数组。 

解决方案比较:

1.推荐在 data 对象上声明所有的响应属性。

    两个原因：

1）.data 对象就像组件状态的模式（schema）。在它上面声明所有的属性让组件代码更易于理解。

 2）.添加一个顶级响应属性会强制所有的 watcher 重新计算，因为它之前不存在，没有         watcher 追踪它。这么做性能通常是可以接受的（特别是对比 Angular 的脏                 检 查，但是可以在初始化时避免。 

 2.Vue.set，vm.$set()  ，方法调用时，页面会全部更新一遍。

  3.数组的splice， concat 方法