vue 中数据改变,强制视图更新

 vue中数据改变,强制视图更新,视图不更新的原因和解决办法

办法1,用 Object.assign

对象改变:oldObj = Object.assign({},newObj);

原理:对象是引用类型,直接改变oldObj的某属性指向地址没变,vue不一定能监控到,所以当我们新建一个对象并赋值给oldObj字段的话,直接改变了它的指向地址

办法2,用vue.set

对象和数组都能用的

this.$set(this,'oldObj',newObj);
this.$set(this,'oldArray',newArray);

例如要改变data中 some: { name: { a: 1, b: 3 } }里面b的值,可以这样

this.$set(this.some.name,‘b’,2)

Vue不允许在已经创建的实例上动态添加新的根级响应式属性,然而它可以使用vue.set方法将相应属性添加到嵌套的对象上。

办法3,使用update

this.$forceUpdate(),强制视图更新


————————————————
版权声明:本文为CSDN博主「tangdou5682」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/tangdou5682/article/details/99946515

猜你喜欢

转载自www.cnblogs.com/Antwan-Dmy/p/12566670.html