Ember.js 如何解决子组件的潜在性能问题

我已经创建了一个多选择表，允许您选择多行；但是，为了检查当前标记（无论是否检查），我需要执行以下操作

在

表

组件中

  {{#each rows as |row index|}}
    {{table-x-row
      row=row
      index=index
      data=data
      selected=(mut selected)
      maxSelectionCount=maxSelectionCount
    }}
  {{/each}}

在

表行

JavaScript文件中

  classNameBindings: ['isSelected:selected'],

  isSelected: computed('selected.[]', {
    get() {
      const index = this.get('index');
      const row = this.get('data.rows')[index];
      return this.get('selected').includes(row);
    }
  }),

每当所选列表对每个表行组件更改加号时，上述代码就会触发，这意味着如果我有10行。计算属性将被调用10次

---

有没有解决这个性能问题的建议？

我试图通过简化表和行来模拟您在下面提到的情况（它们不是实际的表和行，只是用于说明该情况的虚拟组件）。正在为您提到的每一行计算表-x-row中的computed属性。这在性能和数据封装方面都存在问题。将

表-x的所有
所选
数组传递到每一行会中断数据封装。为什么单个行需要知道其他行的选择状态（我的意思是
selected
表的属性）

为了避免这种情况，您可以在
table-x
中装箱计算数组属性，并将
isSelected
信息直接传递到行，如下所示。这样,；只有当实际的
行
更改时，才修改
表-x中定义的计算属性
行选择信息
；当行选择更改时，不会重新计算任何内容。现在，每一行分别传递其
isSelected
属性，因此不知道表的全部数据或全部选择信息。
感谢您的响应。“我需要几分钟来阅读你的样品。”李信阳当然；如果有什么不清楚的地方，我很乐意提供进一步的帮助；顺便说一下，您可以检查一个可扩展的余烬表的余烬插件。