Vue全选复选框性能卡顿问题排查与优化求助

核心问题分析 #

你的100条数据全选卡顿，根源不在于计算属性数量，而在于状态更新的方式和组件渲染的效率：

1. 用index作为v-for的key：Vue无法准确追踪每一行的身份，全选时会触发所有行组件的强制重渲染，而非仅状态变化的组件。
2. 逐个修改row的selected属性：全选时遍历100个对象修改selected，每个修改都会触发一次响应式更新，导致100次独立的组件更新，叠加后造成卡顿。
3. 计算属性的冗余遍历：selectedRows→numSelected→allSelected的连锁依赖，每次状态变化都会触发三次数组遍历，放大了性能开销。

具体优化步骤 #

1. 替换v-for的key为唯一ID

将v-for的key从index改为每行的唯一标识（比如row.id），让Vue能精准识别组件身份，避免不必要的重渲染：

<tr
  v-for="(row, index) in operatingRows"
  :key="row.id" <!-- 替换index为row.id -->
>
  <document-table-row
    :row-idx="index"
    :row-id="row.id" <!-- 新增row-id props，用于判断选中状态 -->
    :row-data="row"
    :fields="row.fields"
    :hidden-column-indices="hiddenColumnIndices"
    :is-selected="selectedIds.includes(row.id)" <!-- 直接传递选中状态 -->
    @toggleSelectedOnRow="toggleSelectedOnRow(row.id)"
  />
</tr>

2. 重构Vuex的选中状态管理

放弃在每个row对象上存储selected属性，改用选中ID集合来管理状态，大幅减少响应式更新次数：

• 修改Vuex state：

state: {
  sorted: [],
  selectedIds: [] // 存储选中行的ID集合
}

• 更新mutations：

mutations: {
  // 全选/取消全选：直接赋值ID数组，而非逐个修改row
  SET_ALL_SELECTED_ON_SORTED(state, { isSelected, targetIds }) {
    state.selectedIds = isSelected ? [...targetIds] : [];
  },
  // 单行选中切换：操作ID集合
  TOGGLE_ROW_SELECTED(state, rowId) {
    const idIndex = state.selectedIds.indexOf(rowId);
    if (idIndex > -1) {
      state.selectedIds.splice(idIndex, 1);
    } else {
      state.selectedIds.push(rowId);
    }
  }
}

3. 简化计算属性，减少冗余遍历

重构计算属性，直接利用selectedIds的长度判断全选状态，避免多层遍历：

operatingRows() {
  const showRow = (r) => {
    // 原有搜索逻辑
  };
  return this.sorted.filter(showRow);
},
// 新增：获取当前展示行的ID集合，用于全选操作
operatingRowIds() {
  return this.operatingRows.map(row => row.id);
},
// 简化全选判断：直接对比ID集合长度和展示行数
allSelected() {
  return this.selectedIds.length === this.operatingRows.length && this.operatingRows.length > 0;
},
// 简化选中数量：直接取ID集合长度
numSelected() {
  return this.selectedIds.length;
},
// 如需选中行数据，按需过滤（非必要可移除）
selectedRows() {
  return this.operatingRows.filter(row => this.selectedIds.includes(row.id));
}

4. 优化子组件的重渲染

将document-table-row组件改为纯组件，仅当props变化时才重渲染：

• 选项式API：添加shouldComponentUpdate钩子

export default {
  props: ['rowId', 'rowData', 'fields', 'hiddenColumnIndices', 'isSelected'],
  shouldComponentUpdate(nextProps) {
    // 仅当关键props变化时才更新
    return nextProps.rowId !== this.rowId || 
           nextProps.isSelected !== this.isSelected ||
           nextProps.hiddenColumnIndices !== this.hiddenColumnIndices;
  },
  // ... 其他逻辑
}

• 组合式API：用memo包装组件

import { defineComponent, memo } from 'vue';

export default memo(defineComponent({
  props: ['rowId', 'rowData', 'fields', 'hiddenColumnIndices', 'isSelected'],
  // ... 其他逻辑
}));

5. 更新全选事件处理

修改全选按钮的事件回调，传递当前展示行的ID集合：

allSelectPressed(isSelected) {
  this.$store.commit('SET_ALL_SELECTED_ON_SORTED', {
    isSelected,
    targetIds: this.operatingRowIds
  });
}

优化效果说明 #

• 全选操作从100次独立响应式更新变为1次数组替换操作，Vue会批量处理所有子组件的状态更新，大幅减少卡顿。
• 计算属性的遍历次数从3次减少到1次（仅operatingRows的过滤），性能开销显著降低。
• v-for的key优化确保组件仅在必要时重渲染，避免无效的DOM操作。

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