为什么 ember 计算属性在 ember 检查器中只执行一次?
Why do ember computed properties only execute once in ember inspector?
我有一个演示控制器:
import Ember from 'ember';
export default Ember.Controller.extend({
firstName: 'Bob',
lastName: 'Smith',
emailAddress: 'bobsmith@gmail.com',
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'));
})
});
当我在浏览器中 运行 在本地主机上安装应用程序时,我打开 ember 检查器和 运行:
$E.get('actualEmailAddress')
这个returns:
actualEmailAddress function is called: bobsmith@gmail.com
但是当我第二次 运行 时,我只得到 undefined
当我 运行 $E.get('fullName')
时也是一样
它returns
executed!
"Bob Smith"
但是当我再次 运行 时,它只是 returns Bob Smith
,而不是 console.log
为什么会这样?
谢谢!
计算属性是惰性缓存。每次它们 运行,它们都会缓存返回值,并且不会重新计算它,除非依赖属性之一发生变化,并且再次访问 CP。
这是设计使然。此外,您所看到的并非孤立于 Ember Inspector -- 所有环境都是如此。
有关详细信息,请参阅我的 。
计算属性仅按需计算,即如果它在 {{actualEmailAddress}}
之类的模板中使用或在 js 代码中用作 this.get('actualEmailAddress');
对于性能计算属性,仅当其依赖的 属性 值发生变化时才会重新计算。所以在第一次计算之后,结果被缓存,如果你再次尝试访问 CP,它只会 return 缓存的值。
在 actualEmailAddress
的第一种情况下,CP 函数第一次执行并且您记录了您的语句但是您没有 returning 一个值因此 undefined
是 return隐含地。所以下次调用 CP 时,缓存值 undefined
是 returned.
在 fullName
的第二种情况下,再次只调用该函数并记录该语句。在这里,由于您已经正确 return 编辑了一个值,下次您尝试调用 CP 时,您将获得缓存的 return 值作为响应。
要强制 CP 重新计算,您需要更改相关属性的值。或者使用一个简单的方法并调用它。
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.
我推荐使用:
yourProperty: function()
{
//do something before send it back, example:
return `${this.get('yourRealProperty')}`;
}.property('yourRealProperty'),
这将 return 调用 yourProperty 时 yourRealProperty 的值。
reference 1
reference 1
我有一个演示控制器:
import Ember from 'ember';
export default Ember.Controller.extend({
firstName: 'Bob',
lastName: 'Smith',
emailAddress: 'bobsmith@gmail.com',
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'));
})
});
当我在浏览器中 运行 在本地主机上安装应用程序时,我打开 ember 检查器和 运行:
$E.get('actualEmailAddress')
这个returns:
actualEmailAddress function is called: bobsmith@gmail.com
但是当我第二次 运行 时,我只得到 undefined
当我 运行 $E.get('fullName')
它returns
executed!
"Bob Smith"
但是当我再次 运行 时,它只是 returns Bob Smith
,而不是 console.log
为什么会这样?
谢谢!
计算属性是惰性缓存。每次它们 运行,它们都会缓存返回值,并且不会重新计算它,除非依赖属性之一发生变化,并且再次访问 CP。
这是设计使然。此外,您所看到的并非孤立于 Ember Inspector -- 所有环境都是如此。
有关详细信息,请参阅我的
计算属性仅按需计算,即如果它在 {{actualEmailAddress}}
之类的模板中使用或在 js 代码中用作 this.get('actualEmailAddress');
对于性能计算属性,仅当其依赖的 属性 值发生变化时才会重新计算。所以在第一次计算之后,结果被缓存,如果你再次尝试访问 CP,它只会 return 缓存的值。
在 actualEmailAddress
的第一种情况下,CP 函数第一次执行并且您记录了您的语句但是您没有 returning 一个值因此 undefined
是 return隐含地。所以下次调用 CP 时,缓存值 undefined
是 returned.
在 fullName
的第二种情况下,再次只调用该函数并记录该语句。在这里,由于您已经正确 return 编辑了一个值,下次您尝试调用 CP 时,您将获得缓存的 return 值作为响应。
要强制 CP 重新计算,您需要更改相关属性的值。或者使用一个简单的方法并调用它。
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.
我推荐使用:
yourProperty: function()
{
//do something before send it back, example:
return `${this.get('yourRealProperty')}`;
}.property('yourRealProperty'),
这将 return 调用 yourProperty 时 yourRealProperty 的值。
reference 1 reference 1