菜单 学习猿地 - LMONKEY

VIP

开通学习猿地VIP

尊享10项VIP特权 持续新增

知识通关挑战

打卡带练!告别无效练习

接私单赚外块

VIP优先接,累计金额超百万

学习猿地私房课免费学

大厂实战课仅对VIP开放

你的一对一导师

每月可免费咨询大牛30次

领取更多软件工程师实用特权

入驻
0
0

uniapp-数据刷新

原创
05/13 14:22
阅读数 203

当某个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

发表评论

0/200
0 点赞
0 评论
收藏