长宁区网站建设网页制作优化网站排名技巧

前言

除了之前介绍的状态管理装饰器，在 V2 中还有其他新增的方法。

makeObserved

开发过程中我们经常会用到从服务器获取到数据(一般是 json 字符串)，转化为对象，然后设置到 UI 中做展示。但有一点比较麻烦：比如我们使用 rcp做网络请求，对返回对象调用toJson() as xxx转为对象，但这样获取到的对象是没办法被观察的，因为这样创建出来的对象不会被添加代理，这时候我们就可以使用UIUtils.makeObserved(xxx)来让改对象变为可观测的。

比如：
定义两个数据类

@ObservedV2
class Person {@Trace name: string = ''@Trace age: number = 0@Trace static staticProp:string = ''@Trace address: Address = new Address()
}@ObservedV2
class Address {@Trace zipCode: string = '000000'@Trace city: string = '北京'
}

然后我们从 json 字符串中反序列化出来对象。

aboutToAppear(): void {@Local jsonPerson: Person | undefined = undefinedlet personJSON: string = `{"name": "huangyuan","age": 19,"address": {"zipCode": "111111","city": "shangdong"}}`let tmp = JSON.parse(personJSON) as Personthis.jsonPerson = UIUtils.makeObserved(tmp)
}

这样this.jsonPerson就是可以被观测到的对象了。当我们修改该对象的属性，对应的 UI 也可以刷新了

getTarget

• 在状态管理中V1中，会给@Observed装饰的类对象以及使用状态变量装饰器如@State装饰的Class、Date、Map、Set、Array添加一层代理用于观测一层属性或API调用产生的变化。
• 在状态管理V2中，会给使用状态变量装饰器如@Trace、@Local装饰的Date、Map、Set、Array添加一层代理用于观测API调用产生的变化。

我们可以使用UIUtils.getTarget(xxx)来获取到代理对象的原始对象。 但是当我们更改getTarget获取的原始对象中的内容不会被观察到变化，也不会触发UI刷新

@ObservedV2的类实例不支持JSON.stringify序列化

这个主要是针对使用new操作符创建且被@ObservedV2装饰的对象。即便是使用UIUtils.getTarget方法来获取原始对象，也不会对V2装饰器生成的前缀进行处理:

状态管理V2装饰器会为装饰的变量生成getter和setter方法，同时为原有变量名添加"_ob"的前缀。出于性能考虑，getTarget接口不会对V2装饰器生成的前缀进行处理，因此向getTarget接口传入@ObservedV2装饰的类对象实例时，返回的对象依旧为对象本身，且被@Trace装饰的属性名仍有"_ob"前缀。

来看个例子：

还是上面定义的两个数据类，被@ObservedV2修饰。
再来创建两个实例对象，一个还是和上面一样从json字符串中反序列化，另外一个使用new操作符创建。

然后我们输出一下使用JSON.stringify序列化之后的字符串

Button('makeObserved 转为json').onClick((_)=>{hilog.error(0x01,'StateManagerV2Page',`toJSON: ${JSON.stringify(this.jsonPerson)}`)
})
Button('new对象 转为json').onClick((_)=>{hilog.error(0x01,'StateManagerV2Page',`toJSON: ${JSON.stringify(this.person)}`)
})
Button('new对象 getTarget 转为json').onClick((_)=>{hilog.error(0x01,'StateManagerV2Page',`toJSON: ${JSON.stringify(UIUtils.getTarget(this.person))}`)
})

当我们一次点击这三个按钮后，控制台输出

toJSON: {“name”:“huangyuan”,“age”:19,“address”:{“zipCode”:“111111”,“city”:“shangdong”}}
toJSON: {“__ob_name”:“xuan”,“__ob_age”:18,“__ob_address”:{“__ob_zipCode”:“000000”,“__ob_city”:“北京”}}
toJSON: {“__ob_name”:“xuan”,“__ob_age”:18,“__ob_address”:{“__ob_zipCode”:“000000”,“__ob_city”:“北京”}}

可以看到，使用new操作符创建的ObservedV2对象属性都添加了__ob_前缀,而通过json 字符串反序列化之后再使用UIUtils.makeObserved方法添加代理之后的对象并没有添加__ob_前缀。

双向绑定

在状态管理 V2 中，更倾向于单向数据流，所有可同步数据的修改都有父控件来处理，然后同步到子组件。 子组件想要修改数据时，需要调用用@Event修饰的回调方法。写起来略显繁琐，这里因此提供了!!双向绑定语法糖。
在使用时，子组件中@Event方法名需要声明为“$”+ @Param属性名，这里还有一些需要注意的地方

如果父组件使用了!!双向绑定语法，则表明父组件的变化会同步给子组件，子组件的变化也会同步给父组件。
如果父组件没有使用!!，则父组件发生的变化是单向的。

@Local count: number = 4
build() {Star({count:this.count!!}) //注意这里，在参数的末尾加了双叹号
}@ComponentV2
struct Star{@Param @Require count:number@Event $count:(val:number) => voidbuild() {Column(){Text(`value ${this.count}`)Button('改变value').onClick((_)=>{this.$count(this.count +1)})}}
}

当我们点击Star中的改变value按钮时，组件中count值也会跟着改变。这个双向绑定的语法糖可以粗暴的理解为

Star({ value: this.value, $value: (val: number) => { this.value = val }})

如果是较为复杂的属性变化，还是使用原始的方案，不要使用语法糖了。

---