1# ArkUI数据更新场景 2<!--Kit: ArkTS--> 3<!--Subsystem: CommonLibrary--> 4<!--Owner: @lijiamin2025--> 5<!--Designer: @weng-changcheng--> 6<!--Tester: @kirl75; @zsw_zhushiwei--> 7<!--Adviser: @ge-yafang--> 8 9当需要网络下载或者本地生成的数据需要发送到UI线程进行展示时，由于ArkUI的标注和[\@Sendable装饰器](../arkts-utils/arkts-sendable.md#sendable装饰器)不能同时修饰变量和对象，因此需要使用[makeObserved](../ui/state-management/arkts-new-makeObserved.md)在ArkUI中导入可观察的Sendable共享数据。 10 11本示例说明以下场景： 12- makeObserved在传入@Sendable类型的数据后有观察能力，且其变化可以触发UI更新。 13- 从子线程获取数据，整体替换UI线程的可观察数据。 14- 从子线程获取的数据重新执行makeObserved，变为可观察数据。 15- 将数据从UI主线程传递回子线程时，只传递不可观察的数据。makeObserved的返回值不能直接传给子线程。 16 17```ts 18// SendableData.ets 19@Sendable 20export class SendableData { 21 name: string = 'Tom'; 22 age: number = 20; 23 gender: number = 1; 24 likes: number = 1; 25 follow: boolean = false; 26} 27``` 28<!-- @[define_sendable_class](https://gitcode.com/openharmony/applications_app_samples/blob/master/code/DocsSample/ArkTS/ArkTsConcurrent/ApplicationMultithreadingDevelopment/PracticalCases/entry/src/main/ets/managers/SendableData.ets) --> 29 30```ts 31import { taskpool } from '@kit.ArkTS'; 32import { SendableData } from './SendableData'; 33import { UIUtils } from '@kit.ArkUI'; 34 35@Concurrent 36function threadGetData(param: string): SendableData { 37 // 在子线程处理数据 38 let ret = new SendableData(); 39 console.info(`Concurrent threadGetData, param ${param}`); 40 ret.name = param + "-o"; 41 ret.age = Math.floor(Math.random() * 40); 42 ret.likes = Math.floor(Math.random() * 100); 43 return ret; 44} 45 46@Entry 47@ComponentV2 48struct Index { 49 // 通过makeObserved给普通对象或是Sendable对象添加可观察能力 50 @Local send: SendableData = UIUtils.makeObserved(new SendableData()); 51 52 build() { 53 Column() { 54 Text(this.send.name) 55 Button("change name").onClick(() => { 56 // 可以观察到属性的改变 57 this.send.name += "0"; 58 }) 59 60 Button("task").onClick(() => { 61 // 将待执行的函数放入taskpool内部任务队列等待，等待分发到工作线程执行。 62 // 因为数据的构建和处理可以在子线程中完成，但有观察能力的数据不能传给子线程，只有在UI主线程里才可以操作可观察的数据。 63 // 所以这里只是将`this.send`的属性`name`传给子线程操作。 64 taskpool.execute(threadGetData, this.send.name).then(val => { 65 // 和@Local一起使用，可以观察this.send的变化 66 this.send = UIUtils.makeObserved(val as SendableData); 67 }) 68 }) 69 } 70 } 71} 72``` 73<!-- @[update_arkui_data](https://gitcode.com/openharmony/applications_app_samples/blob/master/code/DocsSample/ArkTS/ArkTsConcurrent/ApplicationMultithreadingDevelopment/PracticalCases/entry/src/main/ets/managers/MakeobservedSendable.ets) -->