浅拷贝导致Vue响应式失效，因副本脱离Proxy/RefImpl拦截；应避免Object.assign({},obj)等操作，改用structuredClone或Object.assign原地更新，并确保嵌套结构保持响应式。
浅拷贝导致 Vue 响应式数据错乱，本质是复制出一个“看起来一样、实则脱离响应式系统”的副本。你改的是副本，Vue 监听的还是原对象；或者你把副本赋给了响应式变量，结果原代理被替换了——视图自然不更新、watch 不触发、甚至报 undefined 错误。
确认是否真的用了浅拷贝
常见浅拷贝操作包括：Object.assign({}, obj)、{...obj}、arr.slice()、Array.from(arr)、JSON.parse(JSON.stringify(obj))（虽是深拷贝但会丢函数/Date/undefined等，常被误当万能解法）。这些操作对 reactive 对象或 ref.value 都会生成普通对象/数组，彻底丢失 Proxy 或 RefImpl 拦截能力。
- ✅ 安全替代：需要新对象时，用 structuredClone(obj)（现代浏览器支持）或 lodash.cloneDeep；若只是读取，直接用原响应式引用更稳妥
- ❌ 危险写法：
const copy = { ...state }; copy.name = 'new';→ state 不变，视图不动 - ? 快速验证：在控制台打印
copy.constructor和state.constructor，前者是Object，后者应为Reactive或RefImpl
检查赋值目标是否仍是响应式引用
浅拷贝本身不报错，但把它赋给响应式变量时，容易意外替换引用。比如 form = { ...apiData }，form 原本是 reactive({})，这一行让它指向了普通对象，后续所有修改都无效。
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- ✅ 正确做法：用 Object.assign(form, apiData) 或 form = reactive(apiData)（注意 reactive 会返回新代理，需重新赋值并确保模板绑定的是新引用）
- ✅ 更推荐：用 Object.assign 原地填充，避免替换整个响应式引用
- ⚠️ 特别注意：API 返回 plain object 后，不要直接
state.obj = res.data，而应Object.assign(state.obj, res.data)或先reactive(res.data)再赋值
排查嵌套结构是否被“半截断”
浅拷贝只复制第一层，深层属性仍是共享引用。这会导致看似响应式、实则部分失效：比如 const copy = { ...state }，copy.list 是原数组引用，push 可能触发更新；但 copy.list[0].name = 'x' 若 list[0] 是普通对象（非 reactive），那 name 就不响应。
立即学习“Java免费学习笔记（深入）”；
- ✅ 安全做法：对嵌套对象也保持响应式，如初始化时用
reactive({ list: [reactive({ name: '' })] }) - ✅ 动态处理：用 toRaw 获取原始对象后深拷贝，再用 reactive 包裹重建响应式结构
- ? 调试技巧：在 Vue DevTools 中点开 data 面板，看嵌套对象是否有
Reactive标识；没有就说明那一层已脱钩
警惕解构 + 浅拷贝的双重陷阱
先解构再浅拷贝，是最隐蔽的响应式断裂组合。例如 const { user } = store; const formData = { ...user };，user 是 reactive 对象的解构值，已是普通对象，再展开就是纯静态副本。
- ✅ 解构安全方案：用 toRefs(store)，再
const { user } = toRefs(store)，此时 user 是 ref，可安全访问user.value - ✅ 替代思路：不拷贝，直接在模板中用
{{ store.user.name }}，或逻辑中用store.user.name = 'x' - ❌ 避免混合：不要把
toRefs和{...}放在同一行操作，容易误判引用层级
