【HarmonyOS 5】makeObserved接口詳解

##鴻蒙開發(fā)能力 ##HarmonyOS SDK應(yīng)用服務(wù)##鴻蒙金融類應(yīng)用 （金融理財(cái)#

一、makeObserved接口是什么？

makeObserved 接口（API version 12 起可用）用于將非觀察數(shù)據(jù)轉(zhuǎn)為可觀察數(shù)據(jù)，適用于三方包類、@Sendable 裝飾的類、JSON.parse 返回的對(duì)象、collections.Array/Set/Map 等場(chǎng)景。

不支持 undefined和null類型。以及V1 狀態(tài)裝飾器（@State/@Prop）及已被觀察的數(shù)據(jù)，避免雙重代理。主要處理的是Object類型，非Object類型，例如基本數(shù)據(jù)類型number這種，都不支持。

需要注意的是， makeObserved主要針對(duì)的是V2的使用場(chǎng)景 。因?yàn)樗菫榱私鉀Q @Trace/@ObservedV2 無(wú)法覆蓋的痛點(diǎn)觀察需求。比如從網(wǎng)絡(luò)請(qǐng)求返回的JSON對(duì)象，需要在UI上進(jìn)行觀測(cè)操作。就可使用makeObserved。所以V1使用@State就可解決的問(wèn)題，不用考慮這個(gè)。

二、makeObserved如何使用？

（1）接口調(diào)用
使用及其簡(jiǎn)單，只需要導(dǎo)入import { UIUtils } from '@kit.ArkUI'進(jìn)行接口調(diào)用接口。麻煩的是識(shí)別你的入?yún)⑹欠裰С钟^測(cè)監(jiān)聽。

import { UIUtils } from '@kit.ArkUI';


class UserInfo {
  id: number = 0;
}
let observedInfo: UserInfo = UIUtils.makeObserved(new UserInfo());

（2）可從操作的業(yè)務(wù)場(chǎng)景進(jìn)行區(qū)分，符合以下三種場(chǎng)景一般可操作：
1、三方SDK包中的數(shù)據(jù)類，這種情況下需要UI可監(jiān)測(cè)，因?yàn)闊o(wú)法手動(dòng)添加@Trace，一般可支持。
【該場(chǎng)景較為簡(jiǎn)單，參考上面示例即可】

2、@Sendable裝飾的類，因?yàn)榻箘?dòng)態(tài)修改屬性，一般可支持。

import { taskpool } from '@kit.ArkTS';
import { UIUtils } from '@kit.ArkUI';

// 定義@Sendable裝飾的類（支持子線程傳遞）
@Sendable
class UserInfo {
  userId: number = 0;
  username: string = 'Guest';
  score: number = 0;
  isOnline: boolean = false;

  // 構(gòu)造函數(shù)初始化數(shù)據(jù)
  constructor(userId: number, username: string) {
    this.userId = userId;
    this.username = username;
  }
}

// 子線程任務(wù)：模擬數(shù)據(jù)處理（如網(wǎng)絡(luò)請(qǐng)求/復(fù)雜計(jì)算）
@Concurrent
function processDataInThread(userId: number): UserInfo {
  // 模擬耗時(shí)操作（子線程執(zhí)行）
  let result = new UserInfo(userId, 'Loading...');
  setTimeout(() = > {
    // 模擬數(shù)據(jù)更新
    result.score = Math.floor(Math.random() * 100);
    result.isOnline = true;
  }, 1000);
  return result;
}

@Entry
@ComponentV2
struct SendableMakeObservedDemo {
  // 主線程可觀察數(shù)據(jù)：通過(guò)makeObserved包裝@Sendable對(duì)象
  @Local observedUser: UserInfo = UIUtils.makeObserved(new UserInfo(-1, '未登錄'));

  build() {
    Column({ space: 20 })
      .width('100%')
      .padding(30) {
        
        Text('@Sendable + makeObserved 演示')
          .fontSize(24)
          .fontWeight(500)
        
        // 顯示用戶信息
        Text(`用戶ID: ${this.observedUser.userId}`)
          .fontSize(18)
        
        Text(`用戶名: ${this.observedUser.username}`)
          .fontSize(18)
        
        Text(`分?jǐn)?shù): ${this.observedUser.score}`)
          .fontSize(18)
        
        Text(`在線狀態(tài): ${this.observedUser.isOnline ? '在線' : '離線'}`)
          .fontSize(18)
        
        // 觸發(fā)子線程任務(wù)的按鈕
        Button('加載用戶數(shù)據(jù)（子線程處理）')
          .onClick(() = > {
            // 在子線程執(zhí)行數(shù)據(jù)處理
            taskpool.execute(processDataInThread, 1001).then((user: UserInfo) = > {
              // 子線程返回的@Sendable對(duì)象在主線程重新包裝為可觀察數(shù)據(jù)
              this.observedUser = UIUtils.makeObserved(user);
            });
          })
        
        // 本地修改數(shù)據(jù)的按鈕（演示可觀察性）
        Button('本地增加分?jǐn)?shù)')
          .onClick(() = > {
            this.observedUser.score += 10; // 直接修改屬性，觸發(fā)UI刷新
          })
      }
  }
}

3、 JSON.parse返回的匿名對(duì)象，一般是網(wǎng)絡(luò)請(qǐng)求反饋，一般可支持。

import { UIUtils } from '@kit.ArkUI';
import { JSON } from '@kit.ArkTS';

// 定義 JSON 數(shù)據(jù)結(jié)構(gòu)（示例接口）
interface UserData {
  name: string;
  age: number;
  email: string;
}

@Entry
@ComponentV2
struct JsonMakeObservedDemo {
  // 原始 JSON 字符串
  private rawJson: string = '{"name": "Alice", "age": 25, "email": "[email protected]"}';
  
  // 使用 makeObserved 包裝 JSON.parse 返回的對(duì)象
  @Local observedData: UserData = UIUtils.makeObserved(JSON.parse(this.rawJson) as UserData);

  build() {
    Column({ space: 30 })
      .width('100%')
      .padding(30) {
        
        // 顯示 JSON 數(shù)據(jù)
        Text('JSON 可觀察數(shù)據(jù)演示')
          .fontSize(24)
          .fontWeight(500)
        
        Text(`姓名: ${this.observedData.name}`)
          .fontSize(18)
        
        Text(`年齡: ${this.observedData.age}`)
          .fontSize(18)
        
        Text(`郵箱: ${this.observedData.email}`)
          .fontSize(18)
        
        // 修改姓名的按鈕
        Button('修改姓名為 "Bob"')
          .onClick(() = > {
            this.observedData.name = 'Bob'; // 直接修改屬性，觸發(fā) UI 刷新
          })
        
        // 修改年齡的按鈕
        Button('年齡 +1')
          .onClick(() = > {
            this.observedData.age++; // 數(shù)值類型修改，觸發(fā) UI 刷新
          })
        
        // 重置為原始數(shù)據(jù)的按鈕
        Button('重置數(shù)據(jù)')
          .onClick(() = > {
            // 重新解析 JSON 并包裝為可觀察數(shù)據(jù)
            this.observedData = UIUtils.makeObserved(JSON.parse(this.rawJson) as UserData);
          })
      }
  }
}

三、注意

1. getTarget問(wèn)題 ：
   通過(guò)getTarget獲取原始對(duì)象后修改屬性，不會(huì)觸發(fā)UI刷新（需操作代理對(duì)象）
2. 兼容性錯(cuò)誤 ：
   與@State等V1裝飾器混用會(huì)拋異常，需使用V2裝飾器（@Local/@Provide等）

審核編輯 黃宇