Vue 3修改单行值引发整表行重渲染的优化方案求助

方案1：将表格行封装为独立子组件 #

把每一行的逻辑抽成单独的子组件，父组件仅传递每行数据作为props。Vue组件的依赖追踪是组件级别的，只有当当前行对应的props发生变化时，子组件才会重新渲染并调用get_grade，其他行完全不受影响。

代码示例：

<!-- 父组件 -->
<template>
  <table>
    <tbody>
      <TableRow v-for="item in data" :key="item.id" :row-data="item" />
    </tbody>
  </table>
</template>

<script setup>
import TableRow from './TableRow.vue'
// 你的数据源及其他逻辑
</script>

<!-- TableRow.vue 子组件 -->
<template>
  <tr>
    <td>{{ rowData.value }}</td>
    <td>{{ getGrade(rowData) }}</td>
    <td><button @click="rowData.value += 1">修改</button></td>
  </tr>
</template>

<script setup>
const props = defineProps({
  rowData: {
    type: Object,
    required: true
  }
})

function getGrade(row) {
  console.log('ajaj')
  // 你的grade计算逻辑
  return row.value > 60 ? '及格' : '不及格'
}
</script>

方案2：用v-memo精准控制重渲染（Vue 3.2+） #

v-memo可以指定只有当依赖的变量变化时，才重新渲染对应的DOM片段。针对v-for生成的行，把memo依赖设为该行的核心数据，只有这些数据变化时，才会触发get_grade重新计算。

代码示例：

<template>
  <table>
    <tbody>
      <tr v-for="item in data" :key="item.id" v-memo="[item.value]">
        <td>{{ item.value }}</td>
        <td>{{ getGrade(item) }}</td>
        <td><button @click="item.value += 1">修改</button></td>
      </tr>
    </tbody>
  </table>
</template>

<script setup>
import { ref } from 'vue'

const data = ref([
  { id: 1, value: 50 },
  { id: 2, value: 70 },
  // 更多数据...
])

function getGrade(row) {
  console.log('ajaj')
  return row.value > 60 ? '及格' : '不及格'
}
</script>

这里v-memo="[item.value]"表示仅当item.value变化时，该行才会重新渲染，get_grade也只会在此时执行。

方案3：给get_grade添加缓存逻辑 #

如果不想调整组件结构，可以给get_grade加缓存，让它只在依赖的行数据变化时重新计算。可以自己实现简单缓存，也可用lodash的memoize工具。

代码示例（自定义缓存）：

<script setup>
import { ref } from 'vue'

const data = ref([
  { id: 1, value: 50 },
  { id: 2, value: 70 },
])

// 缓存映射：key为行id，value存储当前值和计算后的grade
const gradeCache = new Map()

function getGrade(row) {
  const cached = gradeCache.get(row.id)
  // 缓存存在且对应值未变化时，直接返回缓存结果
  if (cached && cached.value === row.value) {
    return cached.grade
  }
  console.log('ajaj')
  const grade = row.value > 60 ? '及格' : '不及格'
  gradeCache.set(row.id, { value: row.value, grade })
  return grade
}

// 注意：若存在替换整行对象的操作，需同步清理对应缓存
</script>

选型建议 #

• 子组件方案最推荐，符合Vue组件化设计思想，后期维护扩展更方便。
• v-memo适合简单场景，但要确保依赖数组准确，漏写会导致渲染不更新。
• 缓存方案需注意缓存清理逻辑，避免数据更新后缓存未同步引发显示错误。

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