为什么重新赋值不能用reactive要使用ref

这个问题的核心原因在于JavaScript 的引用传递机制和Vue 的响应式代理（Proxy）原理。

简单来说：reactive给你的是一个“代理对象”，如果你把整个变量重新赋值，就等于把这个代理丢了；而ref给你的是一个“装数据的盒子”，你重新赋值时修改的是盒子里的内容（.value），盒子本身没变。

1. 为什么reactive重新赋值会失效？

reactive返回的是一个Proxy 代理对象。你的变量指向的是这个代理。当你进行=重新赋值时，变量指向了一个全新的普通对象，Vue 的代理丢失，自然无法追踪变化。

import{reactive}from'vue'// 1. 初始创建：state 指向一个 Proxy 代理letstate=reactive({count:1})// 2. 修改属性：没问题！触发了 Proxy 的 setterstate.count=2// ✅ 页面会更新// 3. 重新赋值：state 不再指向 Proxy，而是指向了一个全新的普通对象 {}state={count:3}// ❌ 致命错误！响应式链接彻底断开了// 此时再修改属性，Vue 完全感知不到state.count=4// ❌ 页面不会更新（因为 state 已不是响应式对象）

2. 为什么ref重新赋值就可以？

ref返回的是一个RefImpl 实例对象（即带有.value属性的盒子）。你重新赋值时，修改的是盒子里的.value属性，盒子本身（变量指向）始终是那个 Ref 实例，从未改变，因此 Vue 能够一直监听到.value的变化。

import{ref}from'vue'// 1. 初始创建：data 指向一个 Ref 盒子constdata=ref({count:1})// 2. 修改属性：通过 .value 修改，触发了 ref 的 setterdata.value.count=2// ✅ 页面会更新// 3. 重新赋值整个对象：注意！我们修改的是 data.value（盒子里的内容）data.value={count:3}// ✅ 完美响应式！盒子还是那个盒子// 此时修改属性，Vue 依然能感知到data.value.count=4// ✅ 页面会更新

3. 特别注意：如果重新赋值整个ref变量会怎样？

如果你这样写：

letdata=ref({count:1})data=ref({count:2})// 重新赋值整个变量（不是改 .value）

• 语法可行：data确实变成了一个新的 Ref 盒子，它本身依然是响应式的。
• 严重隐患：如果模板或watch监听了旧的data变量，它们绑定的还是旧盒子的引用，新盒子无法被追踪到。这在 Vue 3 的setup中极易引起难以排查的 Bug。
• Vue 官方最佳实践：声明ref时必须使用const，永远不要重新赋值变量本身，只修改.value。这是写 Vue 3 的铁律。

// ❌ 错误示范（极其罕见，但会踩坑）letnum=ref(0)num=ref(10)// 虽然新值是响应式，但可能造成监听失效// ✅ 绝对正确的写法constnum=ref(0)num.value=10// 改值永远走 .value

4. 什么时候该用reactive，什么时候用ref？

5. 实战场景：为什么你在项目中更容易遇到这个问题？

最常见的情况是：从后端接口获取数据并赋值。

// ❌ 错误写法（reactive）constuserInfo=reactive({name:'',age:0})constfetchData=async()=>{constres=awaitapi.getUser()userInfo=res.data// 试图整体替换——失效！}// ✅ 正确写法（ref）constuserInfo=ref({name:'',age:0})constfetchData=async()=>{constres=awaitapi.getUser()userInfo.value=res.data// 整体替换——完美生效！}

总结一句口诀

• reactive：只能改属性（obj.key = newVal），不能换对象（obj = newObj）。
• ref：既能改属性（ref.value.key = newVal），也能换对象（ref.value = newObj）。

所以，当你的数据未来大概率需要整体替换（比如接口返回的新对象）时，请毫不犹豫地使用ref+.value。如果数据结构固定且不需要整体替换（如表单校验对象），用reactive会更省代码（不用到处写.value）。