Vue 对象和数据的强制更新方式

2022-10-14,,

这篇文章主要介绍了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里面数据层次太多, 修改过数据变了,页面没有重新渲染,需手动强制刷新。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持北冥有鱼。 

您可能感兴趣的文章:

  • vue改变对象或数组时的刷新机制的方法总结
  • Vue 数组和对象更新,但是页面没有刷新的解决方式
  • 解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)
  • 详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
  • 详解Vue 普通对象数据更新与 file 对象数据更新

《Vue 对象和数据的强制更新方式.doc》

下载本文的Word格式文档,以方便收藏与打印。