Why do ember computed properties only execute once in ember inspector?

Question

I have a demo controller:

import Ember from 'ember';

export default Ember.Controller.extend({
  firstName: 'Bob',
  lastName: 'Smith',

  emailAddress: '[email protected]',

  fullName: Ember.computed('firstName', 'lastName', function() {
    console.log('executed!');
    return `${this.get('firstName')} ${this.get('lastName')}`;
  }),

  actualEmailAddress: Ember.computed('emailAddress', function() {
    console.log('actualEmailAddress function is called: ', this.get('emailAddress'));
  })
});

When I'm running the app on localhost in the browser, I open ember inspector and run:

$E.get('actualEmailAddress')

This returns:

actualEmailAddress function is called: [email protected]

But when I run it a second time I just get undefined

Same thing when I run $E.get('fullName')

It returns

executed!
"Bob Smith"

But then when I run it again it only returns Bob Smith, not the console.log

Why is this happening?

Thank you!

Answer 1

Computed properties only get computed on demand ie if its used in a template like {{actualEmailAddress}} or used in js code as this.get('actualEmailAddress');

For performance computed properties only get recomputed if its dependent property values are changed. So after the first computation, the result is cached and if you try to access the CP again it will simply return the cached value.

In the first case for actualEmailAddress, the CP function executed the first time and you got your statement logged but you are not returning a value hence undefined is returned implicitly. So the next time you invoke the CP, the cached value undefined is returned.

In the second case for fullName, again the function is only invoked the first time and the statement is logged. Here since you have properly returned a value, the next time you try to invoke the CP, you get the cached return value as a response.

To force the CP to recompute you need to change the value of the dependent properties. Or use a simple method and invoke that.

Answer 2

Computed Properties are lazy caches. Each time they run, they cache the returned value, and don't recompute it unless one of the dependent properties changes, and the CP is accessed again.

This is by design. In addition, what you're seeing isn't isolated to the Ember Inspector-- this is true for all environments.

See my answer to your other question for more detail.

Answer 3

A computed property transforms an object literal with object's accessor function(s) into a property.

By default the function backing the computed property will only be called once and the result will be cached. You can specify various properties that your computed property depends on. This will force the cached result to be recomputed if the dependencies are modified.

I recommend use:

yourProperty: function() 
              { 
                 //do something before send it back, example:
                 return `${this.get('yourRealProperty')}`;
              }.property('yourRealProperty'),

This will return the value of yourRealProperty when you invoque yourProperty.

reference 1 reference 1