Vue 对象和数据的强制更新方式
更新时间：2022年04月02日 14:23:32 作者：一月清辉
这篇文章主要介绍了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里面数据层次太多， 修改过数据变了，页面没有重新渲染，需手动强制刷新。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
watch的基本用法是在Vue实例中定义一个watch对象,该对象内部包含需要监听的数据项和对应的回调函数，这篇文章主要介绍了vue2中watch的使用,需要的朋友可以参考下2024-01-01
下面小编就为大家分享一篇vue2.0 循环遍历加载不同图片的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了Vue和React的相同点不不同点，文中对比介绍的非常详细，对大家的学习或工作有一定的帮助,需要的朋友可以参考下2023-05-05
这篇文章主要介绍了Vue通过ref获取不到$refs问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要介绍了关于VueRouter导入的全过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了vue如何读取本地文件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
本篇文章主要介绍了详解axios在vue中的简单配置与使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
这篇文章主要介绍了vue2.0 路由模式mode="history"的作用，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下2018-10-10
这篇文章主要介绍了vue（2.x，3.0）配置跨域代理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
这篇文章主要介绍了Vue细节，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
最新评论