ember.js - 这是@cached 用于自动跟踪 Ember Octane 的有效用法吗？

Question

最近遇到一个@cached的用例来自 tracked-toolbox编写带有自动跟踪功能的 Glimmer 组件时。这是一个示例代码片段:

import Component from '@glimmer/component';

/**
 * Example usage
 * <PersonInfo
 *  @a={{this.objA}}
 *  @b={{this.stringB}}
 *  @c={{this.intC}}
 * />
 * Where objA can be a large object
 */

export default class PersonInfo extends Component {

  /**
   * I hope @cached here can help avoid re-running output getter in each
   * of the other getters, e.g. this.msg, this.link, this.name
   * But whenever any input args changes it triggers update 
   * (i.e. parent run this.objA = newObj)
   */
  get output() {
    return someExpensiveLogic(this.args.a, this.args.b, this.args.c);
  }

  get msg() {
    return translate(this.output.msg);
  }

  get link() {
    return convert(this.output.link);
  }

  get name() {
    return change(this.output.name);
  }
}

{{!-- In the template --}}
<div>
  {{this.name}}
  {{this.msg}}
  {{this.link}}
</div>

不使用 @cached ，上面的代码会执行 output渲染时getter 3次，每次 msg一次, link和 name .
我还考虑过为 output 构建自己的缓存，但它需要我手动跟踪使用哪个状态并对它们进行哈希处理，这可能很昂贵且难以维护。
据我了解，什么 @cached提供了对自动跟踪系统中“全局标签”的访问，因此我可以依靠该标签来确定缓存何时需要刷新。
由于我目前从事的公司项目不支持此功能，我希望这种用法可以鼓励我们以后添加此类支持。
注意:我发现 @cached是方便的包装

import { createCache, getValue } from '@glimmer/tracking/primitives/cache';

所以基本上我需要的是 @glimmer/tracking/primitives/cache .

Answer 1

根据离线讨论在此处发布跟进。
这是 @cached 的有效用法实用程序来自 tracked-toolbox .狭义用例满足以下要求:

output setter/getter 很贵。

output的结果在 JS 中的其他 getter 中多次使用。 (如果 this.output 仅直接在模板中使用，它在重新运行时已经具有与 @cache 完全相同的语义。)

与 output 中使用的值的显式缓存相比 setter/getter ，使用 @cache不会评估参数值的变化，这意味着如果 this.args.b设置为与之前相同的值，output getter 仍然会重新运行。在这个用例中这不是问题，因为我知道父级不会在输入参数中设置相同的值。