Vue 3响应式需按需代理：reactive适用于中等深度对象，shallowReactive控制大型结构顶层，ref封装Map/Set等引用；Map/Set需用.entries()遍历；递归树用ref+markRaw避免全量响应；动态表单应分层管理而非全量嵌套。
Vue 3 的响应式系统处理复杂数据结构，核心在于“按需代理”和“分层控制”，而不是默认把所有嵌套都变成响应式。盲目用 reactive 包裹深层树、大型 Map 或递归结构，反而容易引发性能问题和内存开销。
用对响应式工具：reactive、shallowReactive、ref 各司其职
– reactive 适合中等深度的对象或数组，比如表单状态、用户配置项；它会递归代理所有嵌套属性，但只对 plain object / array / Map / Set 等内置类型生效。
– shallowReactive 更适合大型结构的顶层控制，例如组织架构树的根对象、动态字段列表的容器——它只代理第一层，子节点保持普通 JS 对象，避免深度劫持带来的开销。
– ref 不仅用于基础类型，也常用来包裹 new Map()、new Set() 或类实例，保证其引用可追踪；修改时必须用 .value.set() 等方法，不能直接赋值新实例。
Map 和 Set 要显式遍历，不能直接 v-for
Vue 模板不支持 v-for="(v, k) in myMap" 这种写法。
– 正确做法是调用迭代器：v-for="[key, value] of map.value.entries()"
– 只需键或值时，分别用 .keys() 或 .values()
– 若 Map 值本身是嵌套结构（如 Map<string map number>></string>），建议用计算属性扁平化，或拆到子组件中封装，避免模板逻辑过重。
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
递归树形结构要切断默认响应链
1200+ 节点的组织树若全量 reactive(tree)，每次展开/搜索都会触发大量依赖通知。
– 推荐顶层用 ref({ nodes: [], version: 1 })，节点数据用 markRaw 跳过响应式处理
– 搜索过滤逻辑放在 computed 中，内部函数保持纯函数特性，不修改原数据
– 加入深度限制（如 maxDepth: 4）和扁平索引（一次预处理生成 keyword → nodeId 映射），让搜索从 O(n) 降到 O(d)
– 渲染层配合虚拟滚动，只更新可视区域节点，其余用占位高度撑开
立即学习“前端免费学习笔记（深入）”；
嵌套表单与动态字段靠组合而非硬套
复杂表单不是靠一层 reactive 套到底，而是分层管理：
– 表单主体用 reactive，字段配置用 ref 数组维护结构定义
– 动态增删字段时，操作的是响应式数组，每个字段的值绑定到 form[fieldKey]，无需为每个字段单独 reactive
– 验证规则、初始值、禁用状态等元信息，可抽成计算属性或封装成自定义 hook，避免模板里堆判断逻辑
