问题:有一个表单是通过数组循环出来的,当输入框的值变化时,没有触发视图更新以及触发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()+直接=赋值