美文网首页
uniapp-数据刷新

uniapp-数据刷新

作者: meryin | 来源:发表于2023-01-05 16:52 被阅读0次

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

    相关文章

      网友评论

          本文标题:uniapp-数据刷新

          本文链接:https://www.haomeiwen.com/subject/cdarcdtx.html