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

时间:2021-6-12 作者:qvyue

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

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。