vue中检测对象和数组值变化的问题

今天工作中遇到改变vue  data中某个对象的值，却无法触发视图更新的问题。看了看官方文档，怎么解决的呢？

1、检测对象的变化

受现代 JavaScript 的限制（以及废弃 Object.observe），Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。

使用Object.assign() 或 _.extend() 方法来添加属性

// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

2. 检测数组的变化

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

(1)、当你利用索引直接设置一个项时，例如： vm.items[indexOfItem] = newValue

(2)、当你修改数组的长度时，例如： vm.items.length = newLength

如何解决上述问题呢？

方法1：

// Vue.set
Vue.set(example1.items, indexOfItem, newValue)

方法2：

// Array.prototype.splice
example1.items.splice(indexOfItem, 1, newValue)