Vue reactive 状态如何管理组织架构树形节点的展开与折叠

用 reactive 管理组织架构树展开/折叠状态，需在初始化时为每个节点显式定义响应式 expanded 字段并包裹整棵树；递归组件中直接修改 node.expanded 触发视图更新，避免非响应式赋值、只读数据、错误深拷贝及 key 冲突。

用 reactive 管理组织架构树的展开/折叠状态，核心是把 expanded（或 isopen）作为节点的响应式字段直接嵌入数据结构中，并在操作时同步更新。Vue 3 的响应式系统会自动触发视图重渲染，无需手动通知。

节点数据必须包含可响应的展开状态字段

每个节点需显式声明 expanded（推荐）或 isopen 字段，且该字段必须是响应式对象的一部分。不能用普通对象属性后期添加，否则不响应：

1. ✅ 正确：初始化时就定义好 expanded: true，且整个树用 reactive 包裹
2. ❌ 错误：先创建节点对象，再通过 node.expanded = true 动态加字段（非响应式）
3. ⚠️ 注意：如果后端返回的数据不含 expanded，需在赋值前做映射处理，例如：

   treedata = reactive(transformRawData(rawData))

递归组件内统一控制展开逻辑

在自定义树节点组件（如 TreeNode.vue）中，通过点击事件切换当前节点的 expanded 值：

1. 接收 node 作为 prop，该 node 是 reactive 对象的子项，修改它会响应
2. 方法内直接写 node.expanded = !node.expanded，无需额外 ref 或 set
3. 子节点区域用 v-if="node.expanded" 控制是否渲染，避免无谓 DOM 节点
4. 确保子节点也传入相同 node.children 并递归调用自身组件

避免常见响应式陷阱

以下情况会导致展开状态不生效或视图不更新：

1. 原始数据是 readonly 或来自 toRefs 解构后的普通变量（失去响应性）
2. 用 Array.prototype.map 或 JSON.parse(JSON.stringify()) 深拷贝后未重新 reactive
3. 在 setup 中用 const tree = ref([]) 却未将节点内部字段设为响应式（应优先用 reactive 处理嵌套结构）
4. 节点 ID 冲突或 key 不唯一，导致 Vue diff 错误复用节点，状态错乱

扩展：支持默认展开与批量操作

若需默认展开某几层，或一键展开全部，可在初始化时批量设置：

1. 遍历树结构，对符合条件的节点（如根节点、或 level ≤ 2）设 node.expanded = true
2. 提供全局方法如 expandAll()，递归调用并标记所有 expanded = true
3. 注意：这些操作仍基于同一个 reactive 树对象，无需额外 trigger，响应式系统自动追踪