uniapp-数据刷新

2023-01-05  本文已影响0人  meryin

当某个data数据是动态设置的,比如:

data() {
return {
parts: [],
}
从网络获取数据并赋值:
const res = await getInquiry()
this.parts = res

而此时this.parts数组里包含的对象很复杂,当你改变this.parts数组里某个对象的元素时,对应的数据确实变了,但是界面没有变化,那么可以用this.$forceUpdate()强制刷新

  chose(o, p) {
    let i = p.indexId.indexOf(o.id)
    if (p.indexId && i >= 0) {
      p.indexId = []
    } else {
      p.indexId = [o.id]
    }
    this.$forceUpdate()
    // this.parts.splice(index, 1, item)
  },

或者刷新this.parts数据也可以(this.parts.splice(index, 1, item)),但是如果this.parts数据太复杂容易出错

总结强制刷新的办法

1.刷新数据源(刷新this.data 从而使 v-if 和key 所在DOM刷新)
2.数据源太复杂用 this.$forceUpdate()

使用场景汇总:

forceUpdate 适用于那些无法被 vue 监听到了 data 属性操作,比如对对象、数组的修改;或者你可能依赖了一个未被 Vue 的响应式系统追踪的状态,比如 某个 data 属性被 Object.freeze() 冻结了等等情况。
v-if 和key方法适用于$forceUpdate 无法满足的强制刷新,需要触发完整的生命周期钩子。

开销:

key同 v-if 一样,开销远远大于 $forceUpdate

上一篇下一篇

猜你喜欢

热点阅读