Vue嵌套表格复选框全选性能问题及优化方案咨询

1. Watch函数大量循环是否会导致性能问题？ #

取决于数据量级：

• 如果是几百条以内的嵌套数据，循环遍历的开销可以忽略，不会出现明显卡顿；
• 如果是上千条以上的深层嵌套数据，watch触发时全量递归遍历所有节点，会带来显著性能损耗——每次复选框操作都会触发全量计算，加上Vue响应式系统的依赖追踪与DOM更新，容易导致页面掉帧、操作延迟。

2. 性能优化方案与实现示例 #

核心优化思路是避免全量遍历，改为局部/事件驱动的状态更新，以下是两种可行方案：

方案一：事件驱动+局部递归（适合保留嵌套数据结构的场景） #

放弃用watch监听整个数据列表，改为在复选框点击事件中直接操作当前节点及其子节点，只更新需要变更的分支：

组件代码示例

<template>
  <div class="nested-table">
    <table>
      <thead>
        <tr>
          <th>
            <input
              type="checkbox"
              :checked="isParentChecked(data)"
              :indeterminate="data.indeterminate"
              @change="handleParentToggle($event.target.checked)"
            />
            {{ data.label }}
          </th>
          <th>其他列</th>
        </tr>
      </thead>
      <tbody v-if="data.children?.length">
        <tr v-for="child in data.children" :key="child.id">
          <td>
            <input
              type="checkbox"
              v-model="child.checked"
              @change="handleChildToggle(child)"
            />
            {{ child.label }}
          </td>
          <td>{{ child.value }}</td>
        </tr>
        <!-- 递归渲染子表格 -->
        <tr v-for="child in data.children" :key="`sub-${child.id}`">
          <td colspan="2">
            <NestedTable :data="child" @update-parent="syncParentStatus" />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: 'NestedTable',
  props: {
    data: {
      type: Object,
      required: true
    }
  },
  methods: {
    // 父级复选框切换：只更新当前节点及其所有子节点
    handleParentToggle(isChecked) {
      this.data.checked = isChecked;
      this.data.indeterminate = false;
      this.traverseChildren(this.data.children, isChecked);
      // 通知上级组件更新状态
      this.$emit('update-parent', this.data);
    },
    // 递归更新子节点状态（仅操作当前分支）
    traverseChildren(children, isChecked) {
      if (!children?.length) return;
      children.forEach(child => {
        child.checked = isChecked;
        child.indeterminate = false;
        this.traverseChildren(child.children, isChecked);
      });
    },
    // 子级复选框切换：更新父节点的选中/半选状态
    handleChildToggle(child) {
      this.syncParentStatus(this.data);
    },
    // 同步父节点的选中状态
    syncParentStatus(parentNode) {
      if (!parentNode.children?.length) return;
      
      const allChecked = parentNode.children.every(child => child.checked);
      const anyChecked = parentNode.children.some(child => child.checked);
      
      parentNode.checked = allChecked;
      parentNode.indeterminate = anyChecked && !allChecked;
      
      // 向上同步到更上层父节点
      this.$emit('update-parent', parentNode);
    },
    // 判断父节点的选中状态
    isParentChecked(node) {
      if (!node.children?.length) return node.checked;
      const allChecked = node.children.every(child => child.checked);
      const anyChecked = node.children.some(child => child.checked);
      node.indeterminate = anyChecked && !allChecked;
      return allChecked;
    }
  }
}
</script>

方案二：扁平化数据结构（适合大数据量场景） #

将嵌套数据转为扁平结构，用parentId关联父子节点，借助Map快速查找子节点，避免深度递归的性能损耗：

数据结构示例

// 扁平化后的数组
const flatTableData = [
  { id: 1, label: '父级1', parentId: null, checked: false },
  { id: 2, label: '子级1-1', parentId: 1, checked: false },
  { id: 3, label: '子级1-2', parentId: 1, checked: false },
  { id: 4, label: '父级2', parentId: null, checked: false },
  { id: 5, label: '子级2-1', parentId: 4, checked: false },
  { id: 6, label: '子级2-1-1', parentId: 5, checked: false },
];

// 预构建子节点映射表（初始化时只执行一次）
const childMap = new Map();
flatTableData.forEach(item => {
  const parentKey = item.parentId ?? 'root';
  if (!childMap.has(parentKey)) {
    childMap.set(parentKey, []);
  }
  childMap.get(parentKey).push(item);
});

核心操作逻辑

// 父级复选框切换：广度优先遍历子节点，避免递归栈溢出
function toggleParent(item, isChecked) {
  item.checked = isChecked;
  const queue = [...(childMap.get(item.id) || [])];
  
  while (queue.length) {
    const child = queue.shift();
    child.checked = isChecked;
    // 将子节点的子项加入队列
    queue.push(...(childMap.get(child.id) || []));
  }
  
  // 向上同步父节点状态
  syncAncestorStatus(item.parentId);
}

// 同步所有祖先节点的选中/半选状态
function syncAncestorStatus(parentId) {
  if (parentId === null) return;
  
  const parent = flatTableData.find(item => item.id === parentId);
  const children = childMap.get(parentId) || [];
  
  const allChecked = children.every(child => child.checked);
  const anyChecked = children.some(child => child.checked);
  
  parent.checked = allChecked;
  parent.indeterminate = anyChecked && !allChecked;
  
  // 继续向上同步
  syncAncestorStatus(parent.parentId);
}

这种方式的优势在于：查找子节点的时间复杂度为O(1)，广度优先遍历比递归更高效，且避免了深层嵌套递归导致的栈溢出风险，适合处理上万条数据的场景。

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