Ember 3 计算属性 getter setter

Question

对于 Ember v3.x，在为计算属性设置值方面是否发生了某些变化？在我的class里有一个CP叫"cp1"

之前 Ember 2.x，我曾经做过

this.cp1 = cp1

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

Answer 1

如果您需要动态定义计算属性，您应该使用 defineProperty：

import { defineProperty, computed } from '@ember/object';

export default Component.extend({
  init() {
    defineProperty(this, 'myComputedProperty', computed('someDependentKey', function() {
      return null;
    });
  }
});

Answer 2

看看你的问题，我可以马上看出两个问题，第一个是关于缺失的 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 但我也会在下面给你一个例子。

假设您有一个结合了 firstName 和 lastName

的计算属性 fullName()

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;
  }
}),

这允许您更新计算的属性而无需删除它的 "computed" 性质

此问题已作为 "May I Ask a Question" 第 2 季第 1 集的一部分得到解答。如果您希望看到我们完整讨论此答案并研究一些示例代码，您可以在此处观看视频：https://youtu.be/v1rBL5_KPqU

Ember 3 计算属性 getter setter

Ember 3 computed property getter setter

javascript

ember.js

ember-cli

Ember 3 计算 属性 getter setter

Ember 3 computed property getter setter

javascript

ember.js

ember-cli

Ember 3 计算属性 getter setter