本问答帖原创发布在华为开发者联盟社区 ,欢迎开发者前往论坛提问交流。
问题描述:
如下两段代码,逻辑基本相同,但第三层属性 this.parent.son.son 重新赋值后,代码 1 的 UI 更新成功,代码 2 的 UI 并未更新。只是将 this.parent.son = this.son;换了位置,结果便不同了。不太明白原因,可以解答下我的疑惑吗?
解决方案:
@State 装饰器,当装饰的数据类型为 class 或者 Object 时,可以观察到自身的赋值的变化,和其属性赋值的变化,第三层变化是无法观察的。
第一段代码中,this.parent.son = this.son 是直接给 parent 的属性赋值,可观察;而 this.parent.son.son = '333'是给第三层的属性赋值,不可观察,故 UI 中的 this.parent.son.son 不会更新。UI 中 this.son.son 更新是因为 class 是引用数据类型,this.parent.son 和 this.son 指向的是同一个堆内存中的对象,该对象的值已发生变化,框架观察到 son 的属性发生变化触发 UI 更新。
第二段代码中,this.parent.son = this.son 时框架观察到 parent 的属性发生变化触发 UI 更新,这是一个异步过程,在 UI 更新时 this.parent.son.son = '333'赋值已执行完毕,所以最终 UI 中的 this.parent.son.son 显示的是最新值。
将两次赋值分开结果就与第一段代码相同。
参考 demo、详细解决方案以及相关的讨论,请点击原帖查看:
@State的观测问题求解,各位大佬能解答一下小弟的疑惑吗,真的有点懵。。。-华为开发者问答 | 华为开发者联盟 (huawei.com)





