Vue 3 computed 怎么处理多维矩阵数据的行列转换-Vue.js-PHP中文网

computed 封装行列转换逻辑，基于响应式源数据声明式返回缓存的二维结构，不修改原始数据、不执行副作用；需用 ref/reactive 管理源数据以保证响应性，大型数据时可拆分预处理或按需生成。

vue 3 computed 怎么处理多维矩阵数据的行列转换

Vue 3 的 computed 本身不直接“处理”行列转换逻辑，而是安全、高效地封装和响应这种转换结果。它不改变原始数据结构，也不执行 DOM 操作或副作用，而是基于响应式源数据（如一维数组、对象列表），声明式地返回一个转换后的二维结构（如表格行/列），并自动缓存、惰性更新。

把行列转换逻辑写成纯函数，再包裹进 computed 中。例如将学生科目成绩列表（每条记录含 studentId、subject、score）转为“学生为行、科目为列”的二维表格数据：

先定义源数据： const rawScores = ref([{ studentId: 's1', subject: 'Math', score: 85 }, ...])
再用 computed 封装转换逻辑：
const tableData = computed(() => {
  const students = [...new Set(rawScores.value.map(s => s.studentId))];
  const subjects = [...new Set(rawScores.value.map(s => s.subject))];
  return students.map(studentId => ({
    id: studentId,
    ...Object.fromEntries(
      subjects.map(sub => [
        sub,
        rawScores.value.find(s => s.studentId === studentId && s.subject === sub)?.score || '-'
      ])
    )
  }));
});
模板中直接使用：<el-table :data="tableData"></el-table>，无需手动调用 .value（模板自动解包）