HarmonyOS 鸿蒙Next中关于ObservedV2对象的序列化和反序列化的问题

ObservedV2序列化和反序列化的使用限制

• @ObservedV2的类实例目前不支持使用JSON.stringify进行序列化。
• 使用@ObservedV2与@Trace装饰器的类，需通过new操作符实例化后，才具备被观测变化的能力。

以上描述来自官方文档

提出需求

1. @ObservedV2的类实例可以序列化为json字符串
2. json字符串可以反序列化为@ObservedV2的类实例，并具备被观测变化的能力
3. 支持嵌套的可序列化和反序列化

@ObservedV2的类实例序列化为json字符串

方案一：JSON.stringify(obj).replaceAll(’_ob’,’’)

[@ObservedV2](/user/ObservedV2)
export class Contact{
  [@Trace](/user/Trace) name:string
  [@Trace](/user/Trace) value:string

  constructor(name: string, value: string) {
    this.name = name;
    this.value = value;
  }
}

[@ObservedV2](/user/ObservedV2)
export class User {
  [@Trace](/user/Trace)
  username: string
  [@Trace](/user/Trace)
  age: number
  [@Trace](/user/Trace)
  contacts:Contact[]

  constructor(username: string,age:number,contacts:Contact[]) {
    this.username = username;
    this.age = age;
    this.contacts = contacts
  }
}

把User对象序列化为json字符串

function userStringify(){
  let contacts:Contact[] = [new Contact('phone','123456')]
  let user:User = new User('alice',2.5,contacts)
  let jsonStr = JSON.stringify(user).replaceAll('__ob_','')
  Logger.debug(jsonStr)
}

日志打印结果：

{"username":"alice","age":2.5,"contacts":[{"name":"phone","value":"123456"}]}

方案二：使用class-transformer库序列化@ObservedV2对象

安装class-transformer

ohpm install class-transformer@0.5.1

直接序列化输出的数据错误，属性名称都变成__ob_xx

let jsonStr = JSON.stringify(instanceToPlain(user))
//日志打印结果
{"__ob_username":"alice","__ob_age":2.5,"__ob_contacts":[{"__ob_name":"phone","__ob_value":"123456"}]}

@Trace装饰的属性都要加上@Expose装饰器

import {instanceToPlain,Expose} from 'class-transformer';

[@ObservedV2](/user/ObservedV2)
export class Contact{
  [@Expose](/user/Expose)()
  [@Trace](/user/Trace)
  name:string

  [@Expose](/user/Expose)()
  [@Trace](/user/Trace)
  value:string

  constructor(name: string, value: string) {
    this.name = name;
    this.value = value;
  }
}

[@ObservedV2](/user/ObservedV2)
export class User {
  [@Expose](/user/Expose)()
  [@Trace](/user/Trace)
  username: string

  [@Expose](/user/Expose)()
  [@Trace](/user/Trace)
  age: number

  [@Expose](/user/Expose)()
  [@Trace](/user/Trace)
  contacts:Contact[]

  constructor(username: string,age:number,contacts:Contact[]) {
    this.username = username;
    this.age = age;
    this.contacts = contacts
  }
}

function userStringifyPlayB(){
  let contacts:Contact[] = [new Contact('phone','123456')]
  let user:User = new User('alice',2.5,contacts)
  //排除掉__ob_前缀的字段
  let jsonStr = JSON.stringify(instanceToPlain(user,{ excludePrefixes:['__ob_']}))
  Logger.debug(jsonStr)
}

日志打印结果：

{"username":"alice","age":2.5,"contacts":[{"name":"phone","value":"123456"}]}

ObservedV2的反序列化可移步我写的这一篇文章

[如何让从Http请求返回的JSON数据转换为@ObservedV2、@Trace装饰的类的对象具有触发UI刷新的能力](https://developer.huawei.com/consumer/cn/forum/topic/0204187019579771145?fid=0109140870620153026)