1. 使用this.$set更新对象属性直接修改对象属性是无法触发页面更新的,需要使用this.$set方法:
this.$set(this.obj, 'key', value)2. 确保数据层级不太深如果对象层级过深,改变内层属性也可能无法触发更新。建议关键数据不要超过2层。
3. 使用深度 watcher可以在watch中用深度watcher的方式监听整个对象的变化:
watch: {obj: {handler(newVal) {// 对象改变响应逻辑},deep: true}
}4. 使用计算属性有些场景可以通过计算属性来响应对象属性变化。
5. 检查是否多次修改同一属性连续多次修改同一属性不会触发多次更新。
注意：
比较推荐的做法是:
- 默认使用 this.$set 更新对象属性this.$set 是 uni-app 提供的接口,可以显式触发属性改变的响应。使用简单,也相对直观,所以在大多数场景下都是比较好的选择。
- 对于层级较深的对象,可以配合深度 watcher 使用如果数据层级很深,只使用 this.$set 可能仍然无法触发更新,这时候可以额外使用 deep watcher 来完整监听对象变化。
- 根据需要使用计算属性计算属性可以将依赖的对象属性转换为一个响应式的计算值,在某些场景下可以简化逻辑。
- 尽量保持数据层级不要太深这是从根本上减少响应问题的方法。业务数据层级不要超过 3 层。
所以,综合来说:
- 默认使用 this.$set 更新对象属性
- 配合深度 watcher 监听深层级对象变化
- 根据实际需求适当使用计算属性
- 保持数据尽量扁平这样可以比较全面地处理对象属性更新页面不响应的问题
eg:
1、使用this.$set更新对象属性
this.$set(this.itemData, 'likeNum', result.length)2、在watch中用深度watcher的方式
js// data中定义对象data() {return {user: {name: 'John',age: 20}}}// 深度watch监听对象所有属性变化watch: {user: {handler(val, oldVal) {// 对象被改变时响应},deep: true}}// 后续修改对象属性都会触发handler函数this.user.name = 'Tom' this.user.age = 22
