Vue中根据ID匹配获取对象多属性的优化方案问询

你可以通过提前将actions数组转换为以ID为键的映射对象，实现一次预处理、多次O(1)快速查找，彻底避免每行重复执行reduce的问题，具体实现如下：

1. 用计算属性生成动作映射 #

利用Vue的计算属性（自带缓存，仅当actions变化时重新计算），把actions转成键值对结构：

computed: {
  actionMap() {
    return this.actions.reduce((map, action) => {
      map[action.id] = action;
      return map;
    }, {});
  }
}

转换后actionMap的结构为：

{
  0: { id: 0, label: "Give advice", description: "Player advises others" },
  1: { id: 1, label: "Fight", description: "Player fights enemy" }
}

2. 模板中直接调用映射对象 #

循环渲染玩家时，直接通过actionMap[player.action]获取完整的动作对象，按需提取属性即可，无需重复执行匹配逻辑：

<table>
  <tr v-for="player in player" :key="player.id">
    <td>{{ player.name }}</td>
    <td>{{ actionMap[player.action]?.label }}</td>
    <td>{{ actionMap[player.action]?.description }}</td>
  </tr>
</table>

这里的?.是可选链操作符，能避免因player.action不存在对应ID时出现报错，提升代码健壮性。

额外说明 #

如果你的actions是静态数据（不会动态变化），也可以在created钩子中一次性转换并存入data，但计算属性更适合响应式场景，能自动监听actions的变化并更新映射。

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