目前,我正在Ember.js中研究Octanify组件。我想不出使用@computed和@tracked有什么区别。这很相似,但有时我发现了一个问题。
@computed get departments() { return this.store.query('department', { per_page: 1 }); }
在这种情况下,删除@computed会使您处于无限循环中。有什么问题吗?
5n0oy7gb1#
这里的@computed(在octane中)的功能与@cached类似,因为它保护您不受每次访问departments时重新运行的getter内容的影响(因为getter基本上是不需要括号的方法(在大多数抽象语法树中,getter称为MethodDefinition(有趣!))当您删除@computed时,this.store.query(...)将在每次访问时调用。为了防止这种情况,您可以在那里扔@cachedimport { cached } from '@glimmer/tracking'(在ember-source@4.1+中或更早版本通过polyfill提供)另一方面,@tracked仅适用于root状态,这是您希望更改或跟踪对的更改并在UI中反映这些更改(以及从这些更改派生的数据)的属性。例如:
@computed
@cached
departments
this.store.query(...)
import { cached } from '@glimmer/tracking'
ember-source@4.1+
@tracked
export default class Foo extends Component { @tracked num = 0; @tracked localCopy = this.args.passedIn; }
这些值可以通过this.num = 2;和this.localCopy = 'new value';设置(例如)还有一些库可以帮助解决这个问题,特别是ember数据(我认为这就是提供this.store的原因)。例如:https://github.com/NullVoxPopuli/ember-data-resources/#query您的代码将变成:b1a1ab
this.num = 2;
this.localCopy = 'new value';
this.store
Available properties: - {{this.blog.records}} - {{this.blog.error}} - {{this.blog.isLoading}} - {{this.blog.isSuccess}} - {{this.blog.isError}} - {{this.blog.hasRun}} Available methods: - <button {{on 'click' this.blog.retry}}>Retry</button>
1条答案
按热度按时间5n0oy7gb1#
这里的
@computed
(在octane中)的功能与@cached
类似,因为它保护您不受每次访问departments
时重新运行的getter内容的影响(因为getter基本上是不需要括号的方法(在大多数抽象语法树中,getter称为MethodDefinition(有趣!))当您删除
@computed
时,this.store.query(...)
将在每次访问时调用。为了防止这种情况,您可以在那里扔
@cached
import { cached } from '@glimmer/tracking'
(在ember-source@4.1+
中或更早版本通过polyfill提供)另一方面,
@tracked
仅适用于root状态,这是您希望更改或跟踪对的更改并在UI中反映这些更改(以及从这些更改派生的数据)的属性。例如:
这些值可以通过
this.num = 2;
和this.localCopy = 'new value';
设置(例如)还有一些库可以帮助解决这个问题,特别是ember数据(我认为这就是提供
this.store
的原因)。例如:https://github.com/NullVoxPopuli/ember-data-resources/#query您的代码将变成:
b1a1ab