在 Vue 3 中，响应式系统使用的是 Proxy 实现，相比 Vue 2 提升很大，很多 Vue 2 中的数据响应式陷阱都被解决了（比如数组索引、新增属性等），但依然存在一些可能导致“响应式丢失”的情况。
🚨 Vue 3 中响应式丢失的典型情况
1. 使用 ref 解构丢失响应性
setup() {
const count = ref(0);
let { value } = count;
value++; // ❌ 无法触发视图更新
}
✅ 正确做法：
count.value++; // 保持响应性
2. 直接解构 reactive 对象
setup() {
const state = reactive({ count: 0 });
const { count } = state;
count++; // ❌ 解构后失去响应性
}
✅ 正确做法：
const state = reactive({ count: 0 });
state.count++; // OK
// 或者使用 toRefs 保持响应性
const { count } = toRefs(state);
count.value++; // OK
3. 赋值非响应式对象或数组
state.list = JSON.parse(JSON.stringify(list)); // ❌ 丢失响应性
✅ 正确做法：
state.list = reactive(JSON.parse(JSON.stringify(list))); // 或者用 shallowReactive 看需求
4. 操作 ref 引用时丢失 .value
const name = ref('Tom');
console.log(name); // ProxyRef 对象，不是 'Tom'
如果你直接传递 ref 对象给不识别响应式的库，或者忘记 .value，就会出错。
5. 在 template 外部使用 ref/reactive 对象时，未解包
比如直接将 ref 对象传给组件或库，没有处理 .value，导致行为异常。
6. 在非响应式结构中嵌套响应式对象
比如响应式数据嵌入 Map、Set、WeakMap 中时，Vue 无法自动追踪这些结构的变化。
const state = reactive(new Map());
state.set('key', 1); // ❌ 无法响应更新
✅ 正确做法：
避免将响应式状态放入 Map/Set，或者自行封装响应式逻辑。
7. 忘记使用 reactive 或 ref 创建响应式数据
setup() {
const count = 0; // ❌ 普通变量，不是响应式的
}
✅ 正确做法：
const count = ref(0); // 或 reactive({ count: 0 })
8. 对 readonly 的响应式对象尝试修改
这不是“丢失响应式”，而是响应性被“锁住”了，但看起来数据无法更新。
🧪 调试建议
-
使用 Vue Devtools 检查响应式对象是否在追踪中。
-
用
isReactive(obj)/isRef(obj)等辅助函数确认数据状态。 -
用
watch()监听怀疑无效的值，看是否触发响应。
