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></form> 组件，会导致输入无法同步回原始数据——VeeValidate 内部会创建独立副本，和你的响应式源断开连接。

• 正确做法是放弃 <form></form> 组件，改用 useForm()，它返回一个扁平化、可写的 values reactive 对象
• 初始化时手动合并嵌套数据：例如 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 对象管理

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！