Vue中对象数组变更时重新渲染子组件的最佳方案

可能的原因及修复方案 #

1. 确认筛选用的是全量原始数据 #

你在filterHeroes里依赖方法参数heroStats赋值，但如果调用这个方法时传入的不是完整的英雄列表，而是已经过滤过的数组，后续筛选会直接丢失原始数据。

修复：直接用inject进来的this.heroStats作为全量数据源，删掉方法里的heroStats参数：

filterHeroes(primary_attribute, attack_type, roles, name) {
  if (!primary_attribute.length) {
    this.heroes = this.heroStats; // 用注入的全量英雄数据
  } else {
    this.heroes = this.heroStats.filter((hero) =>
      primary_attribute.includes(hero.primary_attr)
    );
    // ... 其他筛选逻辑
  }
}

2. 检查HeroCard子组件的props使用方式 #

如果子组件把hero props存到了自己的data里，而不是直接用props，那父组件更新时子组件不会同步：
错误示例（子组件代码）：

data() {
  return {
    localHero: this.hero // 只会初始化一次，不响应父组件更新
  }
}

修复：直接使用props的hero，或者用计算属性包裹：

props: {
  hero: {
    type: Object,
    required: true
  }
}
// 模板里直接用 {{ hero.name }} 这类写法

3. 确保hero.id是唯一稳定的key #

虽然你用了:key="hero.id"，但如果存在重复的id，Vue虚拟DOM会复用组件导致不更新。可以打印heroes数组确认每个hero的id唯一，或者改用hero.id + hero.name作为key（如果id可能重复）。

4. 排查筛选逻辑的其他分支 #

你代码里的...etc部分可能有逻辑错误，比如后续筛选条件覆盖了this.heroes，导致最终数组不符合预期。可以在filterHeroes末尾加console.log(this.heroes)，确认筛选结果是否正确。

快速验证方法 #

在父组件模板里加一行显示当前英雄数量，看勾选复选框时数量是否变化：

<template>
  <div>
    <p>当前显示：{{ heroes.length }} 个英雄</p>
    <div class="intro-y grid grid-cols-12 gap-3 sm:gap-6 mt-5">
      <HeroCard v-for="hero in heroes" :key="hero.id" :hero="hero" />
    </div>
  </div>
</template>

如果数量变了但组件没更新，问题在子组件；如果数量没变化，问题出在筛选逻辑。

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