如何为Ember组件中嵌套数组元素创建响应式computed property？

嘿，我之前在Ember项目里刚好碰到过一模一样的需求，来给你唠唠怎么搞定这个嵌套属性的计算属性触发问题！

方案一：传统计算属性 + @each 依赖键 #

如果你的组件还是用的经典Ember组件（继承自@ember/component），可以通过在计算属性的依赖键里指定完整的嵌套路径，结合@each来监听数组元素的嵌套属性变化。

假设你的数组叫myArray，每个元素的结构是{ 'prop-1': { value: xxx }, 'prop-2': { value: xxx } }，代码可以这么写：

import Component from '@ember/component';
import { tracked } from '@glimmer/tracking';
import { computed } from '@ember/object';

export default class MyNestedArrayComponent extends Component {
  // 你的源数组，用tracked装饰确保数组本身的变化被监听
  @tracked myArray = [
    { 'prop-1': { value: 1 }, 'prop-2': { value: 2 } },
    { 'prop-1': { value: 3 }, 'prop-2': { value: 4 } }
  ];

  // 计算属性，监听每个元素的prop-1.value和prop-2.value变化
  @computed('myArray.@each.prop-1.value', 'myArray.@each.prop-2.value')
  get processedResult() {
    // 这里写你的实际计算逻辑，比如求和、过滤或者重组数据
    return this.myArray.reduce((total, item) => {
      // 注意：带连字符的属性要用方括号语法访问
      return total + item['prop-1'].value + item['prop-2'].value;
    }, 0);
  }
}

这里的关键是依赖键myArray.@each.prop-1.value——@each会告诉Ember监听数组里每一个元素的prop-1.value属性变化，只要任何一个元素的这个值（或者prop-2.value）改动，计算属性就会自动重新计算。

方案二：现代Glimmer组件 + Tracked属性 #

如果你用的是Ember 3.25+推荐的Glimmer组件（继承自@glimmer/component），更优雅的方式是用tracked装饰器来处理嵌套属性，不需要手动写依赖键：

首先，把数组里的嵌套对象封装成一个带tracked属性的类，这样内部的value变化会被自动追踪：

import { tracked } from '@glimmer/tracking';
import Component from '@glimmer/component';

// 定义一个Tracked的元素类
class ArrayItem {
  @tracked prop1Value;
  @tracked prop2Value;

  constructor(prop1Val, prop2Val) {
    this.prop1Value = prop1Val;
    this.prop2Value = prop2Val;
  }
}

export default class MyGlimmerComponent extends Component {
  // 用tracked装饰数组
  @tracked myArray = [
    new ArrayItem(1, 2),
    new ArrayItem(3, 4)
  ];

  // 直接用getter作为计算属性，自动追踪依赖
  get processedResult() {
    return this.myArray.reduce((total, item) => {
      return total + item.prop1Value + item.prop2Value;
    }, 0);
  }
}

这种方式下，当你修改任何一个ArrayItem实例的prop1Value或prop2Value时，Ember的tracked系统会自动检测到变化，触发getter重新计算结果。而且这种写法更符合现代Ember的最佳实践，代码也更简洁。

注意事项 #

• 如果你的数组元素是纯普通对象（没有用tracked装饰内部属性），那么方案二的getter不会自动监听value的变化，这时候方案一的@each依赖键写法更可靠。
• 访问带连字符的属性（比如prop-1）时，一定要用item['prop-1']的方括号语法，不能用item.prop-1（JavaScript的点语法不支持带连字符的属性名）。

内容的提问来源于stack exchange，提问作者copenndthagen