用 reactive 管理组织架构树展开/折叠状态，需在初始化时为每个节点显式定义响应式 expanded 字段并包裹整棵树；递归组件中直接修改 node.expanded 触发视图更新，避免非响应式赋值、只读数据、错误深拷贝及 key 冲突。
用 reactive 管理组织架构树的展开/折叠状态，核心是把 expanded（或 isopen）作为节点的响应式字段直接嵌入数据结构中，并在操作时同步更新。Vue 3 的响应式系统会自动触发视图重渲染，无需手动通知。
节点数据必须包含可响应的展开状态字段
每个节点需显式声明 expanded（推荐）或 isopen 字段，且该字段必须是响应式对象的一部分。不能用普通对象属性后期添加，否则不响应：
- ✅ 正确：初始化时就定义好
expanded: true，且整个树用reactive包裹 - ❌ 错误：先创建节点对象，再通过
node.expanded = true动态加字段（非响应式） - ⚠️ 注意：如果后端返回的数据不含
expanded，需在赋值前做映射处理，例如：
treedata = reactive(transformRawData(rawData))
递归组件内统一控制展开逻辑
在自定义树节点组件（如 TreeNode.vue）中，通过点击事件切换当前节点的 expanded 值：
- 接收
node作为 prop，该 node 是 reactive 对象的子项，修改它会响应 - 方法内直接写
node.expanded = !node.expanded，无需额外ref或set - 子节点区域用
v-if="node.expanded"控制是否渲染，避免无谓 DOM 节点 - 确保子节点也传入相同
node.children并递归调用自身组件
避免常见响应式陷阱
以下情况会导致展开状态不生效或视图不更新：
- 原始数据是
readonly或来自toRefs解构后的普通变量（失去响应性） - 用
Array.prototype.map或JSON.parse(JSON.stringify())深拷贝后未重新reactive - 在
setup中用const tree = ref([])却未将节点内部字段设为响应式（应优先用reactive处理嵌套结构） - 节点 ID 冲突或
key不唯一，导致 Vue diff 错误复用节点，状态错乱
扩展：支持默认展开与批量操作
若需默认展开某几层，或一键展开全部，可在初始化时批量设置：
- 遍历树结构，对符合条件的节点（如根节点、或 level ≤ 2）设
node.expanded = true - 提供全局方法如
expandAll()，递归调用并标记所有expanded = true - 注意：这些操作仍基于同一个 reactive 树对象，无需额外 trigger，响应式系统自动追踪
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
