关于vue无法侦听数组及对象属性的变化的解决方案

问题：有一个表单是通过数组循环出来的，当输入框的值变化时，没有触发视图更新以及触发watch。也就是说改变了数组里对象里的值没有触发视图更新

首先，我们要了解Vue是如何实现数据的双向绑定的！

把一个普通 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。Object.defineProperty 是仅 ES5 支持，且无法 shim 的特性，这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器的原因。

变化检测问题

受到现代JavaScript浏览器的限制，其实主要是 Object.observe() 方法支持的不好，Vue不能检测到对象的添加或者删除。然而Vue在初始化实例时就对属性执行了setter/getter转化过程，所以属性必须开始就在对象上，这样才能让Vue转化它。

一、数组

1、可以监听到的情况

如push、splice、=赋值（array=[1,2,3]）

2、无法监听到的情况

使用下标修改某个元素（这种比较常见）

//使用下标修改某个元素（这种比较常见）
array[index] = 1
object.a = 3
//直接修改数组length
array.length = 5

二、对象

1、可以监听到的

对象的直接=赋值
this.obj = {name: 'test'}

2. 无法监听到的

//对象属性的增删改
obj: {
    prop1: 'data1',
    prop2: 'data2'
}
...
// 增
this.obj.prop3 = 'data3'
// 删
delete this.obj.prop1
// 改
this.obj.prop1 = 'data4'

解决方法：

1.push到数组的时候深拷贝一下

JSON.parse(JSON.stringify(this.widget))

2.给this.widget添加属性的时候使用$set添加，将响应属性添加到对象上

this.$set(this.widget, item.attr,'');

3.object.assign()+直接=赋值