Ember 3计算的属性获取器设置器

Question

With Ember v3.x, did something change with respect to setting a value for computed property ? In my class, I have a CP named "cp1"

Earlier with Ember 2.x, I used to do

this.cp1 = cp1

But with Ember 3.x, the above is not working. Do I need to update the way CP is set with Ember 3.x ?

Answer 1

Looking at your question I can see two issues right away, the first one being about a missing this.set() and the second being that you will need to explicitly define a setter for this to work the way that you would like. I'll go into more details below.

As for your question about this changing between Ember 2.x and Ember 3.x I don't recall any changes that would change this behaviour 🤔 but @Lux is 100% right in their comment to you, this has never been supported behaviour so you might have been doing something that accidentally worked 😂

So firstly let's talk about using this.set() . Ember has an Object Model that requires that you use this.set() to update properties so that other parts of the system (like templates or computed properties) can be notified of the changes. You can read more about this in the official documentation for accessing object properties in Ember .

The second thing that is important to mention is that it is not recommended to override computed properties that don't have setters defined. This has been enough of an issue for new developers that setting computed properties without getters is officially deprecated since Ember 3.8 which means in the next major version of Ember (Ember 4.0) the default behaviour will change.

If you would like to set a computed property you can read the documentation for defining a setter in Ember but I will also give you an example below.

Assuming you have a computed property fullName() that combines firstName and lastName

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

if you were to set this computed property (in an action for example)

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

then you would be overriding the behaviour of the computed property and it would stop updating if you changed firstName or lastName .

If you wanted to implement some business logic that actually split the string Chris Manson and set Chris as the firstName and Manson as the lastName then you would update your computed property to be like this:

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

This allows you to update the computed property without removing the "computed" nature of it 🎉

---

This question was answered as part of "May I Ask a Question" Season 2 Episode 1. If you would like to see us discuss this answer in full and work through some example code you can check out the video here: https://youtu.be/v1rBL5_KPqU

Answer 2

You should use defineProperty if you need to define computed properties dynamically:

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

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