HarmonyOS 鸿蒙Next页面状态为何未正常同步？

【方案一】使用emitter通知testVM所在的struct去更新数据，因为监听的动作只能在组件内，API 10之后class中的this不再指向struct，而[@State](/user/State)的属性监听只能在stauct下才会生效。

注意：emitter只有在真机才会生效，在预览器只会执行一次。

import { hilog } from '@kit.PerformanceAnalysisKit'
import { emitter } from '@kit.BasicServicesKit';
[@Entry](/user/Entry)
[@Component](/user/Component)
struct Page048 {
  [@State](/user/State) testVM: TestVM = new TestVM()
  aboutToAppear(): void {
    emitter.on({ eventId: 1 }, (event) => {
      this.testVM.counter ++
      // this.testVM = JSON.parse(JSON.stringify(this.testVM))
    });
  }
  build() {
    Text(`${this.testVM.counter}`)
  }
}
class TestVM{
counter: number = 0
constructor(){
setInterval(() => {
  <span class="hljs-comment"><span class="hljs-comment">// this.counter++</span></span>
  emitter.emit(
    { eventId: <span class="hljs-number"><span class="hljs-number">1</span></span>, priority: emitter.EventPriority.IMMEDIATE },
    { data: { <span class="hljs-string"><span class="hljs-string">'data'</span></span>: <span class="hljs-number"><span class="hljs-number">33</span></span> } }
  );
  hilog.debug(<span class="hljs-number"><span class="hljs-number">1233</span></span>, <span class="hljs-string"><span class="hljs-string">'TestVM'</span></span>, `<span class="hljs-keyword"><span class="hljs-keyword">new</span></span> count - ${<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.counter}`)
}, <span class="hljs-number"><span class="hljs-number">1000</span></span>)
}
}
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

【方案二】使用@ObjectLink与@Observed，但和方案一类似，还是要考虑执行this.counter++时要保证是在struct中调用的，还有就是这种方式写起来比较麻烦，需要@ObjectLink需要写到一个新的组件里，所以代码要抽离出来一个新组件。参考代码如下

import { hilog } from ‘@kit.PerformanceAnalysisKit’

@Component
struct Page048Child {
@ObjectLink testVM: TestVM
aboutToAppear(): void {
this.testVM.start()
}
build() {
Text(${<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.testVM.counter})
}
}
@Entry
@Component
struct Page048 {
@State testVM: TestVM = new TestVM()
build() {
Column() {
Page048Child({ testVM: this.testVM })
}
}
}
@Observed
class TestVM {
counter: number = 0
// constructor(){
start() {
setInterval(() => {
  <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.counter++
  hilog.debug(<span class="hljs-number"><span class="hljs-number">1233</span></span>, <span class="hljs-string"><span class="hljs-string">'TestVM'</span></span>, `<span class="hljs-keyword"><span class="hljs-keyword">new</span></span> count - ${<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.counter}`)
}, <span class="hljs-number"><span class="hljs-number">1000</span></span>)
}
}
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>