对象属性的属性依赖项

Property dependencies on object attributes

本文关键字：属性 依赖 对象      更新时间：2023-09-26

我想使用属性依赖项来避免对计算属性进行脏检查。由于计算属性所依赖的属性不是基元，而是对象的属性，我不知道如何使其工作。

法典：

import {computedFrom} from 'aurelia-framework';
export class Person {
    personData = {
        firstName: 'John',
        lastName: 'Doe',
        // More attributes...
    }
    // ...
    // Doesn't work:
    @computedFrom('personData.firstName', 'personData.lastName')
    // Neither does:
    // @computedFrom('personData["firstName"], 'personData["lastName"]')
    // Nor:
    // @computedFrom('personData')
    get fullName() {
        return `${this.personData.firstName} ${this.personData.lastName}`;
    }
    // ...
}

@computedFrom 属性将很快添加对表达式的支持 - 请留意 https://github.com/aurelia/binding/pull/276

需要注意的是 - 过度使用@computedFrom（例如@computedFrom(p1.p2.p3, p4.p5, p6, p7, p8)）最终可能比脏检查性能差。观察器的一次性设置与带有脏检查的连续功能评估之间存在权衡 - 您的里程可能会有所不同。

另一种选择是在视图中使用 with 绑定并直接绑定到对象 props：

<span with="personData">${firstName} ${lastName}</span>

最后但并非最不重要的一点是，有一个aurelia-computed插件，它可以解析 getter 函数体并生成一个不使用脏检查的观察器：https://github.com/jdanyow/aurelia-computed

我会在personData属性上添加观察者（https://stackoverflow.com/a/28437456/3436921）并手动设置fullName。

或

使用 @computedFrom（'personData'），并在属性更改时始终创建新personData this.personData = Object.assign({}, this.personData, {firstName: "new first name"})

相关文章：