失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > VUE 更新数据并强制更新视图

VUE 更新数据并强制更新视图

时间:2023-05-28 06:42:46

相关推荐

VUE 更新数据并强制更新视图

在开发过程中,有时发现当数据变动后,视图并未更新。那么下面是一些常见示例的和解决办法

对象类型

当对象为引用类型,vue不一定能监控到 所以当我们新建一个对象并赋值给oldObj字段的话,直接改变了它的指向地址=====》对象和数组都能用的方法:this.$set(this,'oldArray',newArray);this.$set(this,'oldObj',newObj);this.$set(this.some.name,‘b’,2)

数组类型

这些不会改变原始数组,但总是返回一个新数组。当使用非变异方法时,可以用新数组替换旧数组。push(),pop(),shift(),unshift(),splice(),sort(),reverse()可被vue检测到 ,filter(), concat(), slice() 。vue不能检测以下变动的数组:① 当你利用索引直接设置一个项时,vm.items[indexOfItem] = newValue② 当你修改数组的长度时,例如: vm.items.length = newLength

异步类型

可在数据变化之后立即使用 Vue.nextTick(callback)这样回调函数在 DOM 更新完成后就会调用。

强制更新

this.$forceUpdate(),强制视图更新 vue多层循环,动态改变数据后渲染的很慢或者不渲染。比如v-for里面数据层次太多, 修改过数据变了,页面没有重新渲染,需手动强制刷新。

如果觉得《VUE 更新数据并强制更新视图》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。