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