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

Question

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

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 ，上面的代码在渲染时会执行 3 次output getter，分别对msg 、 link和name 。

我还考虑过为output构建自己的缓存，但它需要我手动跟踪使用了哪个状态并对它们进行哈希处理，这可能很昂贵且难以维护。

根据我的理解， @cached提供的是对自动跟踪系统中“全局标签”的访问，因此我可以依靠该标签来确定缓存何时需要刷新。

由于我目前从事的公司项目不支持此功能，我希望这种用法可以鼓励我们以后添加此类支持。

注意：我发现@cached是方便的包装器

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

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

Answer 1

根据离线讨论在此处发布跟进。

这是tracked-toolbox 中@cached实用程序的有效用法。 狭义用例满足以下要求：

1. output吸气剂很贵。
2. output的结果在 JS 中的其他 getter 中多次使用。 （如果this.output仅直接在模板中使用，它在重新运行时已经具有与@cache完全相同的语义。）
3. 与output getter 中使用的值的显式缓存相比，使用@cache不会评估参数值的更改，这意味着如果this.args.b设置为与以前相同的值， output getter 仍将重新运行. 在这个用例中这不是问题，因为我知道父级不会在输入参数中设置相同的值。