Vue的数据更新,页面不更新的解决办法

面向“对象”编程 / 2023-08-18 / 原文

可能原因

更新的数据跟源数据不是同一个,即不是同一个引用

解决办法

最稳妥的办法,可通过拿到源数据取索引的方式进行数据的更新,如:
有一个源数据叫:originData

那么如果在更新时,通过this.originData[index].time = newValue的方式进行更新,而不是item.time = newValue

这样,更新的是源数据,大概率可解决问题。

其他可能的原因及解决办法

  1. 页面组件重复
    解决办法: 给组件加上key='xxx' xxx确保不要重复

  2. 部分对象不支持更改,如:scope.row
    解决办法: 新建对象let newObj = {...scope.row},甚至深拷贝let newObj = JSON.parse(JSON.stringify(scope.row))

  3. 数据不是双向绑定
    解决办法:响应式更新this.$set(this, '你的变量', 新值)

  4. 数据层级过深
    解决办法:强制更新this.$forceUpdate()