浅拷贝不触发响应式更新，因嵌套对象仍共享引用，导致框架无法追踪变化；修改拷贝后的嵌套属性会意外影响原始数据，且视图可能不更新。
浅拷贝本身不触发响应式更新，但它会破坏 Vue 或 React 等框架的数据追踪机制，导致视图不更新或意外更新。
浅拷贝让响应式系统“看不见”变化
Vue 的 reactive 或 data 依赖对象引用建立依赖关系。浅拷贝（如 Object.assign({}, obj) 或展开运算符）生成的新对象虽顶层独立，但嵌套对象仍共享原引用。当你修改新对象的嵌套属性时，Vue 检测不到——因为被修改的仍是原始响应式对象内部的同一引用。
- 例如：
const state = reactive({ user: { name: 'Alice', profile: { age: 25 } } }) - 执行浅拷贝：
const copy = { ...state }→copy.user和state.user指向同一个响应式对象 - 若写
copy.user.profile.age = 26，实际改的是state.user.profile，但 Vue 不会认为这是“新赋值”，可能跳过依赖通知
props 中浅拷贝引发子组件污染父状态
父组件传入一个嵌套对象给子组件，子组件若对 props 做浅拷贝后直接修改嵌套字段，等同于直接修改父组件的响应式数据。
- 父组件：
<child :info="userInfo"></child>，其中userInfo = { name: 'Tom', settings: { theme: 'dark' } } - 子组件中：
const local = { ...props.info }; local.settings.theme = 'light'; - 结果：父组件的
userInfo.settings.theme同步变更为'light'，且视图可能不重绘（因未触发 setter）
状态管理中浅拷贝导致 store 数据“悄悄变更”
Pinia 或 Vuex 中，若在 action 里对 state 浅拷贝后修改再赋回，容易绕过响应式拦截；更危险的是，直接在拷贝对象上改嵌套属性，会穿透影响原始 state。
- 错误写法：
const draft = { ...$state }; draft.items.push(newItem); $state = draft;→ 顶层替换有效，但若写draft.config.flag = true，而$state.config是响应式对象，则该修改不会被 track - 更隐蔽的问题：
const temp = _.clone($state); temp.user.avatar.url = 'new.jpg';→ 若$state.user.avatar是普通对象（非 reactive），这行代码不会触发任何响应，但数据已变
安全做法：用深拷贝 + 显式赋值
要确保响应式更新可靠，关键不是“避免修改”，而是“让框架感知到修改”。推荐组合策略：
- 对需要局部编辑的对象，优先使用
structuredClone()（现代浏览器支持）或_.cloneDeep()创建完全隔离副本 - 修改完成后，用完整对象替换（
$state = newFullState），而非零散改属性 - 在 Vue 中，嵌套结构尽量用
toRefs或computed拆解，避免直接操作深层引用 - 开发阶段开启 Vue Devtools，观察 state 变化是否被正确捕获；若某次修改后界面没反应，先检查是否发生了浅拷贝后的隐式引用修改
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
