避免 reactive 丢失响应式，关键在于保持代理对象不脱离 vue 追踪链：一、勿直接替换引用，应改属性或用 object.assign；二、解构需 torefs；三、数组索引赋值等须用 splice 或展开赋值；四、异步数据避免局部变量赋值，应更新 .value 或合并原对象；五、传参前禁用 json 序列化等破坏代理的操作。
避免 reactive 丢失响应式，关键不是“怎么用 reactive”，而是“别让代理对象脱离 Vue 的追踪链”。Vue 3 的响应式靠 Proxy 拦截属性访问来建立依赖，一旦操作绕过代理（比如解构、换引用、索引赋值），链路就断了。下面五种常见场景对应明确的规避方式，直接可用。
不直接替换 reactive 变量的引用
reactive 返回的是一个代理对象，Vue 通过这个引用跟踪变化。用 = 赋值新对象，等于丢弃原代理，新对象是普通裸对象，完全不响应。
- ❌ 错误：
const user = reactive({ name: '张三' }); user = { name: '李四' }; - ✅ 正确：只改属性 ——
user.name = '李四'或批量更新Object.assign(user, { name: '李四', age: 25 }) - ✅ 替代方案：若必须整体替换（如接口返回全新结构），改用
ref管理顶层变量：const user = ref(null); user.value = response.data;
解构时用 toRefs 保持连接
ES6 解构会提取原始值（字符串、数字、普通对象），不是代理引用，后续修改与响应式系统彻底脱钩。
- ❌ 错误：
const state = reactive({ count: 0 }); const { count } = state; count++; - ✅ 安全写法：始终通过原对象读写 ——
state.count++ - ✅ 需解构时：用
toRefs(state)转为 ref，每个字段仍指向原属性：const { count } = toRefs(state); count.value++;（模板中可直接写{{ count }}） - ✅ 补充方案：对单个字段，也可用
computed映射：const count = computed(() => state.count);
数组和对象新增/修改要走 Proxy 可拦截路径
Proxy 能拦截 push、pop、splice 等方法，但无法拦截 arr[0] = x、obj.newKey = y 这类直接赋值。
- ❌ 数组失效操作：
arr[0] = 'new'; arr.length = 0; - ✅ 正确做法：
arr.splice(0, 1, 'new')或arr[0] = 'new'; arr = [...arr];（触发引用变更） - ❌ 对象新增属性：
obj.newKey = 'value';（对 reactive 对象无效） - ✅ 正确做法：
Object.assign(obj, { newKey: 'value' })或初始化时预声明：reactive({ newKey: '' })
异步数据更新别赋给局部变量
常见误区是把 API 响应直接赋给一个临时变量或错误地重赋值响应式容器本身。
- ❌ 错误：
const data = ref(null); const res = await api.get(); data = res;（data引用被覆盖） - ✅ 正确：
data.value = res;或Object.assign(state, res)（如果state是 reactive） - ✅ 更稳妥：API 返回后，优先合并进已有响应式对象，而非新建或替换整个结构
传入组合式函数或子组件前做防护
props、第三方工具（如 lodash.cloneDeep、JSON.parse(JSON.stringify())）返回的都是普通对象，响应式立即中断。
- ❌ 错误：
const copy = JSON.parse(JSON.stringify(state)); - ✅ 正确：需要深拷贝时，用
structuredClone（保留部分响应式结构），或拷贝后重新reactive包裹 - ✅ 最佳实践：组合式函数内部尽量只操作原始响应式源；必要时用
toRaw显式取原始值，再手动转回响应式 - ✅ 对 props：不解构，统一用
props.xxx访问；若需解构，先toRefs(props)
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
