Vue响应式系统按需追踪嵌套属性，仅对实际读取的路径建立依赖；未访问路径不触发更新，深层属性需显式访问，替换整个嵌套对象会丢失响应式，Map/Set仅结构变更可响应，WeakMap/WeakSet不支持响应式。
Vue 的响应式系统对嵌套结构不是“无脑递归代理”，而是按需追踪、边界清晰。它只在你真正读取（get）某条路径时，才为该路径建立响应式依赖；没访问过的深层属性，不会被 proxy 捕获，也不会触发更新。
嵌套对象：依赖只绑定到实际访问的路径
比如：const state = reactive({ user: { profile: { name: 'Alice' } } })。若模板中只写 {{ state.user.profile.name }}，那么只有 profile.name 这一路径被 track。此时修改 state.user.settings.theme，哪怕 settings 是 reactive 的，也不会让当前组件重新渲染——因为这个路径从未被读取过，也就没建立依赖。
- 深层属性必须显式访问才能纳入响应式链，未定义路径（如
state.user.contact.phone）会直接报错，不会进入 proxy 的 get 拦截 - 用可选链
?.或v-if做存在性判断，是安全读取嵌套字段的前提 - 直接替换整个嵌套对象（如
state.user = { ... }）会丢失响应式，应改用Object.assign(state.user, newData)或逐个赋值
嵌套 Map / Set：结构变更可响应，内容修改不自动联动
Map 和 Set 的响应式能力仅作用于自身结构：add、delete、clear、size、keys()、values() 等操作会被监听；但内部存放的对象，其属性变化不会让 Map/Set “感知”自身需要更新。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
-
map.set('cfg', reactive({ theme: 'dark' }))→cfg.theme = 'light'会触发依赖该对象的 effect，但不会导致v-for重跑，除非模板中调用了map.entries()或map.values() -
set.add({ id: 1, count: 0 })中的普通对象，修改count不会刷新视图；必须写成set.add(reactive({ id: 1, count: 0 }))，且模板中需触发迭代（如v-for="item of mySet"）才能建立依赖 - WeakMap / WeakSet 不支持响应式，不要用于需要 Vue 自动追踪的场景
嵌套表单与 VeeValidate：别传嵌套引用，要用 useForm 合并值
把 ref({ authData, companyData }) 直接当 :initial-values 传给 <Form> 组件，会导致输入无法同步回原始数据——VeeValidate 内部会创建独立副本，和你的响应式源断开连接。
立即学习“前端免费学习笔记（深入）”；
- 正确做法是放弃
<Form>组件，改用useForm()，它返回一个扁平化、可写的valuesreactive 对象 - 初始化时手动合并嵌套数据：例如
const values = reactive({ ...authData, ...companyData.company.basicInfo }) - 配合
useField('authData.name')可精准绑定字段，避免路径解析歧义
性能与安全：避免常见响应式断裂
响应式不是魔法，它依赖 JavaScript 引用机制和 Vue 的拦截时机。以下操作极易导致更新失效：
- 解构赋值后修改：
const { name } = state.user; name = 'Bob'→ 解构出的是普通字符串，不再响应 - 数组索引直接赋值（尤其在旧版或特殊场景下）：
list[0] = newItem推荐改用list.splice(0, 1, newItem)或整体替换 - 深层嵌套层级过深会增加 proxy 开销和内存占用，建议在业务层做合理扁平化，或拆分多个独立 reactive 对象管理
