解决vue数据改变,但视图没有刷新
vue数据改变视图并未刷新的问题
·
对于这个问题,来看一下官方的说法:
深入响应式原理
根据描述,由于js的限制,vue无法实现对对象属性新增、删除和数组类型长度改变,通过索引直接赋值的变化检测。所以当我们对数据进行这些操作时,数据是成功改变的,但由于vue无法监听这些改变,所以不会对这些改变做出视图刷新。以下介绍一些解决方法:
1.this.$forceUpdate()
数据改变后使用,强制刷新视图,但是性能损耗,不推荐使用。
2.对象类型的属性值修改/新增/删除
//修改:使用Object.assign
this.obj = Object.assign({},{name:'ddd',...this.object});
//新增:this.$set()
this.$set(this.obj,'age',18);
//新增:Obejct.assign()
this.obj = Obejct.assign({},this.obj,{name:'ddd',age:'18'})
//删除:this.$delete()
this.$delete(this.obj,'age')
3.数组类型的长度改变/对应下标元素修改
//修改:this.$set()
this.$set(array,3,'ddd')
//删除:使用数组的原生splice方法
this.array.splice(array,3,'ddd');
更多推荐
所有评论(0)