对象属性的属性依赖关系答案

【问题标题】：Property dependencies on object attributes对象属性的属性依赖关系
【发布时间】：2016-01-21 20:03:38
【问题描述】：

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

代码：

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}`;
    }

    // ...
}

【问题讨论】：

标签： javascript aurelia

【解决方案1】：

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

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

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

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

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

【讨论】：

是否已重新添加？

【解决方案2】：

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

或

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

【讨论】：

Watchers 将是一个选项，如果事实证明 computedFrom 装饰器不支持对象属性。第二个建议是没有选择的，因为 personData.firstName 和 personData.lastName 绑定到 UI 输入控件，并且手动拦截数据流以始终创建一个新的 personData 对象太麻烦，而且无论如何都没有好的风格。