javascript - Ember 3 计算属性 getter setter

Question

在 Ember v3.x 中，计算属性的值设置是否发生了变化？ 在我的类(class)中，我有一个名为“cp1”的 CP

之前在 Ember 2.x 中，我曾经这样做过

this.cp1 = cp1

但是对于 Ember 3.x，上面的方法不起作用。我需要更新 Ember 3.x 的 CP 设置方式吗？

Answer 1

看着你的问题，我可以立即看到两个问题，第一个是关于缺少 this.set() 的问题，第二个是你需要为此显式定义一个 setter 按照您想要的方式工作。我将在下面详细介绍。

至于你关于 Ember 2.x 和 Ember 3.x 之间的这种变化的问题，我不记得任何会改变这种行为的变化 🤔 但 @Lux 对你的评论是 100% 正确的，这从来都不是支持的行为，因此您可能做了一些意外起作用的事情 😂

首先我们来谈谈使用this.set()。 Ember 有一个对象模型，要求您使用 this.set() 来更新属性，以便系统的其他部分(例如模板或计算属性)可以收到更改通知。您可以在 official documentation for accessing object properties in Ember 中阅读更多相关信息。

需要提及的第二件事是，不建议覆盖未定义 setter 的计算属性。对于新开发者来说，这已经是一个足够大的问题了，setting computed properties without getters is officially deprecated since Ember 3.8 这意味着在 Ember 的下一个主要版本(Ember 4.0)中，默认行为将会改变。

如果您想设置计算属性，您可以读取 documentation for defining a setter in Ember，但我也会在下面给您一个示例。

假设您有一个计算属性 fullName()，它结合了 firstName 和 lastName

fullName: computed('firstName', 'lastName', function() {
  return `${this.firstName} ${this.lastName}`;
}),

如果您要设置此计算属性(例如在操作中)

this.set('fullName', 'Chris Manson');

那么您将覆盖计算属性的行为，并且如果您更改 firstName 或 lastName，它将停止更新。

如果您想实现一些实际拆分字符串 Chris Manson 并将 Chris 设置为 firstName 和 Manson 的业务逻辑 作为 lastName 然后您将计算属性更新为如下所示:

fullName: computed('firstName', 'lastName', {
  get() {
    return `${this.firstName} ${this.lastName}`;
  },
  set(propertyName, newValue) {
    // propertyName is not used - if you logged it then it would say `fullName`
    let pieces = newValue.split(' ');

    this.set('firstName', pieces[0]);
    this.set('lastName', pieces[1]);

    return newValue;
  }
}),

这允许您更新计算属性，而无需删除它的“计算”性质 🎉

<小时/>

这个问题已作为“我可以问一个问题”第 2 季第 1 集的一部分得到解答。如果您希望看到我们完整讨论这个答案并完成一些示例代码，您可以在此处观看视频:https://youtu.be/v1rBL5_KPqU