在uni-app中,如果data中的对象属性改变了,但是页面没有相应更新的情况,通常有以下几点需要注意:-Toy模板网

这篇具有很好参考价值的文章主要介绍了在uni-app中,如果data中的对象属性改变了,但是页面没有相应更新的情况,通常有以下几点需要注意:。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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的方式文章来源地址https://www.toymoban.com/news/detail-587105.html

					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

到了这里，关于在uni-app中,如果data中的对象属性改变了,但是页面没有相应更新的情况,通常有以下几点需要注意:的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！