Ember.js中的@computed 和 @tracked

xzabzqsa  于 2022-09-28  发布在  其他
关注(0)|答案(1)|浏览(184)

目前,我正在Ember.js中研究Octanify组件。我想不出使用@computed和@tracked有什么区别。这很相似,但有时我发现了一个问题。

@computed
get departments() {
  return this.store.query('department', { per_page: 1 });
}

在这种情况下,删除@computed会使您处于无限循环中。有什么问题吗?

5n0oy7gb

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中反映这些更改(以及从这些更改派生的数据)的属性。
例如:

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

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>

相关问题