若干种在日常开发中会导致@Observed失效的情况-51CTO.COM

概述

@Observed与@ObjectLink是开发中常用的复杂数据类型绑定的技巧。
但是@Observed与@ObjectLink在开发中存在着许多坑。
接下来我将列举我遇到的几个坑。

测试环境

测试工具：DevEco Studio 3.1.1 Release
测试API版本号:API9
测试环境：

OpenHarmony 3.2 Release
HarmonyOS API9 模拟器

正确使用场景

首先我将举例正确在开发中@Observed与@ObjectLink的正确使用方式，并且正确文件的源文件我也会打包放置在资源文件中。

先来看实现效果：

若干种在日常开发中会导致@Observed失效的情况-开源基础软件社区

源代码：

若干种在日常开发中会导致@Observed失效的情况-开源基础软件社区

DataModel.ets：

// 接口
@Observed
export class  DataInteface {
  value: number;
}
// 实现数据类
@Observed
export class DataModel implements DataInteface {
  value: number = 0;
}

Index.ets：

import { DataModel, DataInteface } from "../model/DataModel"

@Entry
@Component
struct Index {
  @State
  sensors: DataInteface[] = [
    new DataModel(),
    new DataModel(),
    new DataModel(),
    new DataModel(),
    new DataModel(),
    new DataModel(),
  ];

  build() {
    Row() {
      List() {
        ForEach(this.sensors, (item: DataInteface) => {
          ListItem() {
            SensorView({ sen: item })
          }.width("100%")
        })
      }
      .width("100%")
    }
  }
}

@Component
struct SensorView {
  @ObjectLink
  sen: DataInteface
  build() {
    Button(`点击数据会自增${this.sen.value}`)
      .fontSize(20)
      .backgroundColor(Color.Yellow)
      .onClick(() => {
        this.sen.value++;
        console.log("anran" + this.sen.value)
      })
  }
}

错误使用方法

1、使用interface撰写接口

虽然按照TypeScript规范需要使用interface撰写接口，但是@Observed不能修饰interface。所以在OpenHarmony开发中应当使用class撰写接口。
效果：可以进行数据双向绑定，但是编译时会报错。

错误代码：

若干种在日常开发中会导致@Observed失效的情况-开源基础软件社区

// 接口
@Observed
export interface  DataInteface {
  value: number;
}
// 实现类
@Observed
export class DataModel implements DataInteface {
  value: number = 0;
}

2、使用链式编程初始化数据

在OpenHarmony中不应当使用链式编程初始化@Observed修饰的对象。因为这将会替代掉@Observed帮助我们生产的对象转而使用原生的数据对象。这将会导致所有的数据无法进行双向绑定。
在实际项目中很容易因为一贯的编程经验而使用链式编程，这时候就会出现问题，而且这种问题很难排查，小编就遇到了这种问题。

效果：

若干种在日常开发中会导致@Observed失效的情况-开源基础软件社区