Vue 3 的 reactive 不自动构建目录树，需先用 id/parent_id 手动构建树形结构再包裹；展开状态应独立用 reactive Set 管理；增删改须通过响应式方式操作，避免直接修改嵌套属性。
Vue 3 的 reactive 本身不“实现”目录树结构，它只是让普通 JavaScript 对象变成响应式——真正决定树形结构的是你如何组织和转换原始数据。关键在于：先构建正确的树形数据模型，再用 reactive 包裹它，后续所有展开/折叠、选中、增删操作才具备自动更新视图的能力。
树形数据必须提前建好，不能靠 reactive “自动变树”
后端或 mock 返回的通常是扁平列表（比如带 id 和 parent_id 的文件数组），reactive 不会帮你递归拼接父子关系。你得自己写逻辑，例如：
- 遍历一次数据，用 Map 建立
id → node索引 - 再遍历一次，把每个节点推入其
parent_id对应父节点的children数组 - 最后找出根节点（
parent_id为空或为 0 的项）作为树入口
完成后，再用 reactive 包裹整个树对象，它才具备响应性：
展开/折叠状态要独立管理，别直接塞进树节点里
如果把 isExpanded: true 直接加在每个节点上，会导致每次展开都触发整个树的响应式依赖更新（哪怕只点了一个节点）。更高效的做法是：
react-best-practices
下载
重要：对 React 或 Next.js 代码的任何更改必须先阅读本技能。Vercel 工程团队的 React 与 Next.js 指南，涵盖可视化...
立即学习“前端免费学习笔记（深入）”；
- 用单独的
ref或reactive对象记录展开状态，例如：const expandedIds = reactive(new Set()) - 模板中通过
expandedIds.has(node.id)判断是否显示子节点 - 点击切换时只操作这个 Set，不会污染原始树数据
增删改操作要保持响应式链路不断
对树节点做修改时，不能绕过响应式系统。常见错误写法：
// ❌ 直接 push 到 children 数组（若 children 是普通数组，非 reactive 创建）node.children.push(newChild)
// ✅ 正确做法：确保 children 是 reactive 数组，或用 Vue 提供的响应式工具
node.children = [...node.children, newChild]
// 或使用 unref + reactive 包裹后的数组
多级联动时，避免直接修改深层嵌套属性
比如用户重命名某个文件夹，你可能想写 treeRoot.children[0].children[2].name = '新名字'。这在 reactive 下可行，但可维护性差。推荐封装方法：
- 提供一个
updateNodeById(id, updates)工具函数，在内部递归查找并安全赋值 - 函数内统一触发
nextTick或通知相关 UI 更新（如面包屑、地址栏） - 这样所有修改入口集中，便于加日志、校验、撤销等逻辑
