1# getTarget接口：获取状态管理框架代理前的原始对象 2 3为了获取状态管理框架代理前的原始对象，开发者可以使用[getTarget接口](../reference/apis-arkui/js-apis-StateManagement.md#gettarget12)。 4 5>**说明：** 6> 7>从API version 12开始，开发者可以使用UIUtils中的getTarget接口获取状态管理框架代理前的原始对象。 8 9## 概述 10 11状态管理框架会对Class、Date、Map、Set、Array类型的原始对象添加代理，用于观测属性变化与API调用。这一层代理会使得变量类型改变，在类型判断、NAPI调用等场景，会由于类型并非原始对象的类型产生预料之外的结果。 12 13- 使用getTarget接口需要导入UIUtils工具。 14 15 ```ts 16 import { UIUtils } from '@kit.ArkUI'; 17 ``` 18 19- 状态管理V1中，会给\@Observed装饰的类对象以及使用状态变量装饰器如\@State装饰的Class、Date、Map、Set、Array添加一层代理用于观测一层属性或API调用产生的变化。 20- 状态管理V2中，会给使用状态变量装饰器如\@Trace、\@Local装饰的Date、Map、Set、Array添加一层代理用于观测API调用产生的变化。 21 22使用getTarget接口可以获取这些代理对象的原始对象。 23 24## 限制条件 25 26- getTarget仅支持对象类型传参 27 28 ```ts 29 import { UIUtils } from '@kit.ArkUI'; 30 let res = UIUtils.getTarget(2); // 非对象类型入参，错误用法 31 @Observed 32 class Info { 33 name: string = "Tom"; 34 } 35 let info: Info = new Info(); 36 let rawInfo: Info = UIUtils.getTarget(info); // 正确用法 37 ``` 38 39- 更改getTarget获取的原始对象中的内容不会被观察到变化，也不会触发UI刷新。 40 41 ```ts 42 import { UIUtils } from '@kit.ArkUI'; 43 @Observed 44 class Info { 45 name: string = "Tom"; 46 } 47 @Entry 48 @Component 49 struct Index { 50 @State info: Info = new Info(); 51 52 build() { 53 Column() { 54 Text(`info.name: ${this.info.name}`) 55 Button(`更改代理对象的属性`) 56 .onClick(() => { 57 this.info.name = "Alice"; // Text组件能够刷新 58 }) 59 Button(`更改原始对象的属性`) 60 .onClick(() => { 61 let rawInfo: Info = UIUtils.getTarget(this.info); 62 rawInfo.name = "Bob"; // Text组件不能刷新 63 }) 64 } 65 } 66 } 67 ``` 68 69## 使用场景 70 71### 获取状态管理V1代理前的原始对象 72 73状态管理V1有两种场景会给对象增加代理： 74 75【1】\@Observed装饰的类实例。在创建\@Observed装饰的类实例时，会给该实例添加代理。该过程发生在new对象的过程中，没有经过new操作符创建的对象是不被代理的。 76 77```ts 78@Observed 79class ObservedClass { 80 name: string = "Tom"; 81} 82class NonObservedClass { 83 name: string = "Tom"; 84} 85let observedClass: ObservedClass = new ObservedClass(); // 被代理 86let nonObservedClass: NonObservedClass = new NonObservedClass(); // 不被代理 87``` 88 89【2】状态变量装饰器装饰的复杂类型对象。使用\@State、\@Prop等状态变量装饰器装饰Class、Map、Set、Date、Array时，会添加代理。若该对象已经是代理对象，则不会重复创建代理。 90 91```ts 92@Observed 93class ObservedClass { 94 name: string = "Tom"; 95} 96class NonObservedClass { 97 name: string = "Tom"; 98} 99let observedClass: ObservedClass = new ObservedClass(); // 被代理 100let nonObservedClass: NonObservedClass = new NonObservedClass(); // 不被代理 101@Entry 102@Component 103struct Index { 104 @State observedObject: ObservedClass = observedClass; // 已被代理数据不会重复创建代理 105 @State nonObservedObject: NonObservedClass = nonObservedClass; // 创建代理 106 @State numberList: number[] = [1, 2, 3]; // Array类型创建代理 107 @State sampleMap: Map<number, string> = new Map([[0, "a"], [1, "b"], [3, "c"]]); // Map类型创建代理 108 @State sampleSet: Set<number> = new Set([0, 1, 2, 3, 4]); // Set类型创建代理 109 @State sampleDate: Date = new Date(); // Date类型创建代理 110 111 build() { 112 Column() { 113 Text(`this.observedObject === observedClass: ${this.observedObject === observedClass}`) // true 114 Text(`this.nonObservedObject === nonObservedClass: ${this.nonObservedObject === nonObservedClass}`) // false 115 } 116 } 117} 118``` 119 120使用UIUtils.getTarget接口可以获取代理前的原始对象。 121 122```ts 123import { UIUtils } from '@kit.ArkUI'; 124@Observed 125class ObservedClass { 126 name: string = "Tom"; 127} 128class NonObservedClass { 129 name: string = "Tom"; 130} 131let observedClass: ObservedClass = new ObservedClass(); // 被代理 132let nonObservedClass: NonObservedClass = new NonObservedClass(); // 不被代理 133let globalNumberList: number[] = [1, 2, 3]; // 不被代理 134let globalSampleMap: Map<number, string> = new Map([[0, "a"], [1, "b"], [3, "c"]]); // 不被代理 135let globalSampleSet: Set<number> = new Set([0, 1, 2, 3, 4]); // 不被代理 136let globalSampleDate: Date = new Date(); // 不被代理 137@Entry 138@Component 139struct Index { 140 @State observedObject: ObservedClass = observedClass; // 已被代理数据不会重复创建代理 141 @State nonObservedObject: NonObservedClass = nonObservedClass; // 创建代理 142 @State numberList: number[] = globalNumberList; // Array类型创建代理 143 @State sampleMap: Map<number, string> = globalSampleMap; // Map类型创建代理 144 @State sampleSet: Set<number> = globalSampleSet; // Set类型创建代理 145 @State sampleDate: Date = globalSampleDate; // Date类型创建代理 146 147 build() { 148 Column() { 149 Text(`this.observedObject === observedClass: ${this.observedObject === 150 observedClass}`) // true 151 Text(`UIUtils.getTarget(this.nonObservedObject) === nonObservedClass: ${UIUtils.getTarget(this.nonObservedObject) === 152 nonObservedClass}`) // true 153 Text(`UIUtils.getTarget(this.numberList) === globalNumberList: ${UIUtils.getTarget(this.numberList) === 154 globalNumberList}`) // true 155 Text(`UIUtils.getTarget(this.sampleMap) === globalSampleMap: ${UIUtils.getTarget(this.sampleMap) === 156 globalSampleMap}`) // true 157 Text(`UIUtils.getTarget(this.sampleSet) === globalSampleSet: ${UIUtils.getTarget(this.sampleSet) === 158 globalSampleSet}`) // true 159 Text(`UIUtils.getTarget(this.sampleDate) === globalSampleDate: ${UIUtils.getTarget(this.sampleDate) === 160 globalSampleDate}`) // true 161 } 162 } 163} 164``` 165 166### 获取状态管理V2代理前的原始对象 167 168状态管理V2会给状态变量装饰器如\@Trace、\@Local装饰的Map、Set、Date、Array添加一层代理。和V1不同的是，状态管理V2不会对类对象实例进行代理。 169 170```ts 171@ObservedV2 172class ObservedClass { 173 @Trace name: string = "Tom"; 174} 175let globalObservedObject: ObservedClass = new ObservedClass(); // 不被代理 176let globalNumberList: number[] = [1, 2, 3]; // 不被代理 177let globalSampleMap: Map<number, string> = new Map([[0, "a"], [1, "b"], [3, "c"]]); // 不被代理 178let globalSampleSet: Set<number> = new Set([0, 1, 2, 3, 4]); // 不被代理 179let globalSampleDate: Date = new Date(); // 不被代理 180@Entry 181@ComponentV2 182struct Index { 183 @Local observedObject: ObservedClass = globalObservedObject; // V2中对象不被代理 184 @Local numberList: number[] = globalNumberList; // Array类型创建代理 185 @Local sampleMap: Map<number, string> = globalSampleMap; // Map类型创建代理 186 @Local sampleSet: Set<number> = globalSampleSet; // Set类型创建代理 187 @Local sampleDate: Date = globalSampleDate; // Date类型创建代理 188 189 build() { 190 Column() { 191 Text(`this.observedObject === globalObservedObject ${this.observedObject === globalObservedObject}`) // true 192 Text(`this.numberList === globalNumberList ${this.numberList === globalNumberList}`) // false 193 } 194 } 195} 196``` 197 198使用UIUtils.getTarget接口可以获取代理前的原始对象。 199 200```ts 201import { UIUtils } from '@kit.ArkUI'; 202@ObservedV2 203class ObservedClass { 204 @Trace name: string = "Tom"; 205} 206let globalObservedObject: ObservedClass = new ObservedClass(); // 不被代理 207let globalNumberList: number[] = [1, 2, 3]; // 不被代理 208let globalSampleMap: Map<number, string> = new Map([[0, "a"], [1, "b"], [3, "c"]]); // 不被代理 209let globalSampleSet: Set<number> = new Set([0, 1, 2, 3, 4]); // 不被代理 210let globalSampleDate: Date = new Date(); // 不被代理 211@Entry 212@ComponentV2 213struct Index { 214 @Local observedObject: ObservedClass = globalObservedObject; // V2中对象不被代理 215 @Local numberList: number[] = globalNumberList; // Array类型创建代理 216 @Local sampleMap: Map<number, string> = globalSampleMap; // Map类型创建代理 217 @Local sampleSet: Set<number> = globalSampleSet; // Set类型创建代理 218 @Local sampleDate: Date = globalSampleDate; // Date类型创建代理 219 220 build() { 221 Column() { 222 Text(`this.observedObject === globalObservedObject ${this.observedObject === 223 globalObservedObject}`) // true 224 Text(`UIUtils.getTarget(this.numberList) === globalNumberList: ${UIUtils.getTarget(this.numberList) === 225 globalNumberList}`) // true 226 Text(`UIUtils.getTarget(this.sampleMap) === globalSampleMAP: ${UIUtils.getTarget(this.sampleMap) === 227 globalSampleMap}`) // true 228 Text(`UIUtils.getTarget(this.sampleSet) === globalSampleSet: ${UIUtils.getTarget(this.sampleSet) === 229 globalSampleSet}`) // true 230 Text(`UIUtils.getTarget(this.sampleDate) === globalSampleDate: ${UIUtils.getTarget(this.sampleDate) === 231 globalSampleDate}`) // true 232 } 233 } 234} 235``` 236 237状态管理V2装饰器会为装饰的变量生成getter和setter方法，同时为原有变量名添加"\_\_ob\_"的前缀。出于性能考虑，getTarget接口不会对V2装饰器生成的前缀进行处理，因此向getTarget接口传入\@ObservedV2装饰的类对象实例时，返回的对象依旧为对象本身，且被\@Trace装饰的属性名仍有"\_\_ob\_"前缀。 238 239该前缀会导致某些NAPI接口无法按预期处理对象的属性，以下面的对象为例，目前已知影响的NAPI接口如下： 240 241```ts 242// ObservedV2装饰的类 243@ObservedV2 244class Info { 245 @Trace name: string = "Tom"; 246 @Trace age: number = 24; 247} 248let info: Info = new Info(); // NAPI接口传入info实例 249``` 250 251| 影响接口名 | 影响结果 | 252| ----------------------- | ---------------------------------------------- | 253| napi_get_property_names | 返回值为"\_\_ob\_name"，"\_\_ob\_age"。 | 254| napi_set_property | 使用"name"，"\_\_ob\_name"均能赋值成功。 | 255| napi_get_property | 使用"name"，"\_\_ob\_name"均能获取到值。 | 256| napi_has_property | 使用"name"，"\_\_ob\_name"均返回true。 | 257| napi_delete_property | 删除属性时需要加上"\_\_ob\_"前缀才能删除成功。 | 258| napi_has_own_property | 使用"name"，"\_\_ob\_name"均返回true。 | 259| napi_set_named_property | 使用"name"，"\_\_ob\_name"均能赋值成功。 | 260| napi_get_named_property | 使用"name"，"\_\_ob\_name"均能获取到值。 | 261| napi_has_named_property | 使用"name"，"\_\_ob\_name"均返回true。 |