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 选项配合手动触发,但更推荐:

