computed适合树形数据扁平化，需用纯函数封装递归逻辑、确保输入响应式、加安全判断children、返回新数组不改原数据，并为大数据量加防抖或分批处理。
computed 适合做树形数据的扁平化计算，但必须规避响应式陷阱和递归性能问题。它不是直接执行“一次性转换”，而是构建一个依赖追踪清晰、可缓存、按需更新的扁平数组。
用递归函数 + computed 封装扁平逻辑
把扁平化逻辑写成纯函数（不操作 this 或响应式对象），再在 computed 中调用。关键点：
- 函数接收原始树数据作为参数，返回新数组，不修改原数据
- 确保输入是响应式引用（如 ref 或 reactive），computed 才能自动追踪变化
- 避免在函数内访问未定义的 children，加安全判断：node.children && Array.isArray(node.children)
示例：
const treeData = ref([
{ id: 1, name: '一级', children: [{ id: 2, name: '二级' }] },
{ id: 3, name: '另一级' }
])
const flattenTree = (nodes, level = 0, parentId = null) => {
return nodes.reduce((acc, node) => {
const flatNode = { ...node, level, parentId }
delete flatNode.children
acc.push(flatNode)
if (node.children && Array.isArray(node.children)) {
acc.push(...flattenTree(node.children, level + 1, node.id))
}
return acc
}, [])
}
const flatList = computed(() => flattenTree(treeData.value))
处理大数据量时加防抖或节流控制
当 treeData 频繁变更（比如拖拽中实时更新），直接 computed 可能触发过多重算。可结合 watch + nextTick 或使用 computed 的 lazy 选项配合手动触发，但更推荐：
立即学习“前端免费学习笔记（深入）”；
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 用 shallowRef 存储扁平结果，watch treeData 深度变化后异步更新
- 对超大节点数（>500）启用分批扁平：先生成骨架，再用 requestIdleCallback 补全
- 层级过深时限制最大 level，避免栈溢出
需要带层级缩进或父子关系时，保留关键字段
单纯删掉 children 不够，表格或树表组件常需知道：
- 当前节点是否为叶子节点（children 为空数组或 undefined）
- 父节点 ID（用于排序、拖拽校验）
- 是否可展开（children 是否存在且非空）
因此扁平结果建议统一结构：
{
id: 2,
name: '二级',
level: 1,
parentId: 1,
isLeaf: true,
canExpand: false
}
避免 computed 内部产生副作用或循环依赖
常见错误：
- 在 flatten 函数里给 node 添加响应式属性（如 node.level = level），会污染原始数据，破坏响应式依赖链
- flatList 作为另一个 computed 的输入，又反过来修改 treeData，造成循环更新
- 用 toRaw 或 markRaw 包裹树数据后传入，导致 computed 无法监听变化
正确做法：所有新增字段都在新对象中创建，保持输入不可变。
