HarmonyOS 鸿蒙Next @ObservedV2+@Trace修饰后不更新UI问题

发布于 1周前 作者 nodeper 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next @ObservedV2+@Trace修饰后不更新UI问题
这样的话 如果数组更新，页面不会更新ui


[@ObservedV2](/user/ObservedV2)
export class BResumeSearchViewModel {
  
[@Trace](/user/Trace) HotList: hotWordsDTO[] = []
}
export interface HotWordsLisDTO {
  jobTitle: string
  hotWords: Array<hotWordsDTO>
}

export interface hotWordsDTO {
  word: string
}
ForEach(this.vm.HotList, (item: hotWordsDTO) => {
  this.tagView(item.word)
}, (item: hotWordsDTO, index: number) => JSON.stringify(item.word) + index)

更多关于HarmonyOS 鸿蒙Next @ObservedV2+@Trace修饰后不更新UI问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
2 回复

@ObservedV2类装饰器装饰class。需要放在class的定义前，使用new创建类对象。

@Trace成员变量装饰器 可装饰的变量有 class中成员属性。属性的类型可以为number、string、boolean、class、Array、Date、Map、Set等类型。

可以参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-new-observedv2-and-trace-V5

可以参考demo：

[@ObservedV2](/user/ObservedV2)
class ViewModel {
  [@Trace](/user/Trace) title: string = "开始"
  [@Trace](/user/Trace) title2: string = "t1"
  [@Trace](/user/Trace) observeList: DemoItemObserved[] = []

  loadData() {
    setTimeout(() => {
      this.title = "成功";
      this.title2 = "t2";
      for (let index = 0; index < 4; index++) {
        this.observeList.push(new DemoItemObserved(`张${index}`, "中文学校"))
      }
    }, 2000)
  }
}

[@ObservedV2](/user/ObservedV2)
class DemoItemObserved {
  [@Trace](/user/Trace) title: string = "张大"
  [@Trace](/user/Trace) subTitle: string = "外国语学校"

  constructor(title: string, subTitle: string) {
    this.title = title;
    this.subTitle = subTitle;
  }
}

@Component
struct View1 {
  @Prop title: string

  build() {
    Text(this.title)
  }
}

@Component
struct View2 {
  viewModel: ViewModel = new ViewModel()

  build() {
    List() {
      ForEach(this.viewModel.observeList, (item: DemoItemObserved) => {
        ListItem() {
          Row() {
            Text(item.title)
            Text(item.subTitle)
          }
        }
      })
    }
  }
}

@Entry
@Component
struct Index {
  viewModel: ViewModel = new ViewModel()

  build() {
    Column() {
      Button("模拟加载数据")
        .onClick(() => {
          this.viewModel.loadData()
        })
      Text(this.viewModel.title)
      View1({ title: this.viewModel.title2 })
      View2({ viewModel: this.viewModel })
    }
  }
}

更多关于HarmonyOS 鸿蒙Next @ObservedV2+@Trace修饰后不更新UI问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙系统中，使用@ObservedV2和@Trace修饰后UI未更新，通常是因为数据绑定或状态更新机制未正确触发。

@ObservedV2主要用于声明一个可观察的类属性，当属性值变化时，会通知UI层进行更新。若UI未更新，请检查以下几点：

  1. 确保属性已被@ObservedV2正确修饰。
  2. 检查属性是否在UI组件中正确绑定。
  3. 确认属性变化是否发生在UI线程。

@Trace主要用于性能追踪，标记方法或代码块的执行时间，帮助开发者优化性能。它本身不直接影响UI更新。若怀疑性能问题导致UI更新滞后，可通过@Trace分析并优化相关代码。

针对UI不更新的问题，还需考虑：

  • 是否存在其他逻辑错误或异常导致UI更新被阻塞。
  • 使用的UI框架或组件库是否支持当前的数据绑定方式。
  • 系统版本差异是否导致兼容性问题。

若以上检查均无误，但问题依旧存在，可能是系统或框架层面的bug。此时，建议直接联系鸿蒙系统官方支持渠道。如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html。

回到顶部