watchEffect中解构普通对象会导致依赖收集完全失效，因其属性访问无Proxy拦截或getter封装，解构后变量脱离响应式系统，无法触发重执行。
在 watchEffect 中对普通对象（非响应式）解构，会导致依赖收集完全失效——不是“没监听到变化”，而是根本没建立任何依赖关系。
为什么解构普通对象会让 watchEffect “看不见”变化
watchEffect 的依赖收集机制只在执行过程中捕获对响应式数据的读取行为。它通过 Proxy 的 getter 拦截、ref 的 .value 访问等触发追踪。而普通 JS 对象（如 { name: 'Alice' }）没有 Proxy 代理，也没有 getter/setter 封装，它的属性访问是纯静态的。
一旦你用解构把它拆成独立变量，就彻底脱离了 Vue 的响应式系统：
- 解构即拷贝值：const { name } = plainObj → name 是字符串字面量，不是 ref，也不是 reactive 属性路径
-
watchEffect 不会记录它：回调里写
console.log(name)，Vue 根本不拦截这个读取，因为没经过响应式访问链 - 后续改 plainObj.name 或 name 本身，都不会触发重跑：既无依赖，也无 setter 触发机制
对比看：解构响应式对象 vs 解构普通对象
✅ 对 reactive 对象用 toRefs 解构：
const state = reactive({ name: 'Alice' });-
const { name } = toRefs(state);→ name 是 ref，name.value的读取会被拦截 -
watchEffect(() => console.log(name.value));→ 正常追踪
❌ 直接解构普通对象：
const plain = { name: 'Alice' };-
const { name } = plain;→ name 是普通字符串 -
watchEffect(() => console.log(name));→ 首次执行后，再改plain.name或重新赋值name = 'Bob'，函数永不重跑
常见误用场景与修正方式
这类问题多出现在以下情况：
- 把 API 返回的 plain object 直接解构使用，没过
reactive或ref包裹 - 从工具函数返回一个普通对象，又在
watchEffect里解构它 - 把 props 解构成普通变量（未用
toRefs），然后传给watchEffect
修正原则很明确：所有进入 watchEffect 的数据，必须保持响应式访问路径完整：
- 用
ref包一层：const dataRef = ref(plain); watchEffect(() => console.log(dataRef.value.name)) - 用
reactive包一层：const data = reactive(plain); watchEffect(() => console.log(data.name)) - 避免解构，直接访问原始响应式源：watchEffect(() => console.log(props.name))
怎么快速验证是否真的收集到了依赖
加一句日志 + Vue Devtools 是最直接的方式：
- 在
watchEffect回调开头写console.log('effect run') - 打开 Vue Devtools → Reactive 面板 → 找到当前组件 → 点开 effect 查看 “deps” 列表
- 如果 deps 为空或只有无关项，说明解构切断了响应链
