Vue 对象和数据的强制更新方式
对象和数据的强制更新
数组更新
以下支持自动更新
push()//向后添加pop()//删除最后一个shift()//删除第一个unshift()//向第一个添加元素splice()//向指定位置添加/删除元素sort()//用原地算法对数组的元素进行排序reverse()//将数组中元素的位置颠倒
注意,这种形式修改数据 this.arr[1] = ‘x’ // 不是响应性的,这种情况,可以采用splice方法修改数据即可实现更新
强制更新
this.$set(数组,下标,修改后的值)
eg:this.$set(this.dataArr,1,{})对象更新
Vue 不能检测对象属性的添加或删除:
强制更新
this.$set(this.obj, ‘age', 27)
更新数据并强制更新视图
在开发过程中,有时发现当数据变动后,视图并未更新。那么下面是一些常见示例的和解决办法
对象类型
当对象为引用类型,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里面数据层次太多, 修改过数据变了,页面没有重新渲染,需手动强制刷新。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
webpack4+Vue搭建自己的Vue-cli项目过程分享
这篇文章主要介绍了webpack4+Vue搭建自己的Vue-cli,对于vue-cli的强大,使用过的人都知道,极大的帮助我们降低了vue的入门门槛,感兴趣的朋友跟随脚本之家小编一起看看吧2018-08-08
vue cli3配置image-webpack-loader方式
这篇文章主要介绍了vue cli3配置image-webpack-loader方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-07-07
Jenkins Sidebar Link插件实现添加侧边栏功能详解
这篇文章主要介绍了vue框架实现添加侧边栏,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-12-12
完美解决vue引入BMapGL is not defined的问题
在Vue项目中使用BMapGL时,通过在src下添加bmp.js文件并配置密钥(ak),可以有效解决地图API的应用问题,本方法是基于个人经验总结,希望能为开发者提供参考和帮助2024-10-10


最新评论