问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何监听数组内对象属性变化？

头像
HarmonyOS码上奇行
    12.2k16310

    如何监听数组内对象属性变化

    HarmonyOSharmonyos
    阅读 862
    avatarAI BotBETA

    要监听数组内对象属性的变化，你可以使用 JavaScript 的 Proxy 对象来创建一个代理，并定义一个名为 set 的陷阱函数。这个陷阱函数会在对象属性被设置时被调用，你可以在这个函数中实现你需要的逻辑。

    以下是一个示例代码：

    const arr = [{}, {}, {}]; // 假设这是你要监听的数组

const proxyArr = new Proxy(arr, {
  set(target, property, value) {
    target[property] = value;
    console.log(`The value of ${property} has been changed to ${value}`);
    return true; // 表示设置成功
  }
});

// 修改数组内的对象属性
proxyArr[0].name = 'John'; // 输出：The value of name has been changed to John

    在上面的代码中，我们使用 Proxy 对象创建了一个代理 proxyArr，并将原始数组 arr 作为目标对象传递给 Proxy 的构造函数。然后，我们定义了一个名为 set 的陷阱函数，当 proxyArr 中的对象属性被设置时，这个函数会被调用。在 set 函数中，我们将新值赋给目标对象的属性，并输出一条日志信息。最后，我们返回 true 表示设置成功。

    通过这种方式，你可以监听数组内对象属性的变化，并在属性被修改时执行相应的逻辑。

    1 个回答
    得票最新
    头像
    HarmonyOS码上奇行
      12.2k16310

      解决措施：

      通过@Observed配合@ObjectLink装饰符实现。@Observed用于类，@ObjectLink用于变量。

      参考代码

      // 1. 在类上使用@Observed。   
@Observed   
class ClassA {   
 public name: string;   
 public c: number;   
 public id: number;   
   
 constructor(c: number, name: string = 'OK') {   
 this.name = name;   
 this.c = c;   
 }   
}   
   
@Component   
struct ViewA {   
 label: string = 'ViewA1';   
 // 2. 在组件变量使用@ObjectLink。   
 @ObjectLink a: ClassA;   
   
 build() {   
 Row() {   
 Button(\`ViewA [\${this.label}] this.a.c= \${this.a.c} +1\`)   
 .onClick(() =\> {   
 this.a.c += 1;   
 })   
 }.margin({ top: 10 })   
 }   
}
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题