ref和reactive

Vue3 响应式核心：ref与reactive全方位对比及实战指南
先记住一句话 Vue3 里想让数据变了页面自动更新，就两个工具： ref（全能） reactive（只给对象用）

1. ref 是什么？

你可以把它理解成：
一个带“监听功能”的盒子

• 不管你放什么：数字、字符串、对象、数组都行
• 盒子本身不变，变的是里面的东西
• 在 JS 里要写 .value 才能拿到内容
• 模板里自动拆盒子，不用写 .value

例子：

jsconstcount=ref(0)count.value++// JS 里必须 .valuehtml{{count}}<!--模板自动拆包-->

优点：

• 可以整个换掉里面的值
• 基本类型只能用它

2. reactive 是什么？

理解成：
给一个对象“套上监控外套”

• 只能给对象/数组用
• 不用 .value ，直接改属性
• 深层属性也是响应式

例子：

jsconstuser=reactive({name:'张三',age:18})user.age=19// 直接改，不用 .value

缺点：

• 不能整个换掉对象
• 一换 = 外套丢了 = 不响应了

3. 最关键区别：能不能整体替换？

ref ✅ 可以整体换

jsconstform=ref({name:'',age:''})form.value={name:'新',age:20}

盒子还在，只是换了内容 → 依旧响应

reactive ❌ 不能整体换

jsconstform=reactive({name:'',age:''})form={name:'新',age:20}// 完蛋！响应断了

你把整个对象换了，监控外套没跟着换

4. 解构会丢响应性（超级常见坑）

不管是 ref 还是 reactive，直接解构都会变普通变量，不再响应。

错误：

jsconststate=reactive({count:0})const{count}=state// 变成普通数字！count++// 页面不更新

正确：

jsimport{toRefs}from'vue'const{count}=toRefs(state)count.value++// 正常响应

toRefs 的作用：把 reactive 里的每个属性都变成 ref

5 ref和reactive 所以真正的关系是：

• ref 是外层包装

• 真正做响应式的，还是 reactive + Proxy

一句话总结：
ref = 给基本类型套了个对象壳，再用 reactive 代理这个壳。
因为 reactive不能处理基本数据类型，ref包装成对象就可以了

5. 最简单使用口诀

• 基本类型（数字、字符串、布尔）→ 用 ref
• 对象、表单、不想写 .value → 用 reactive
• 需要重置/整体替换 → 用 ref
• 要解构 → 用 toRefs

6.总结

• ref = 万能盒子，能整体替换，基本类型必用
• reactive = 对象外套，不能整体替换
• 解构必用 toRefs

1. 基本类型、对象、数组，全都能用 ref 变成响应式

2. 如果我处理的是对象，又不想写 .value，就可以用 reactive

3. 但如果需要替换整个对象，必须用 ref

4. 因为只有 ref 替换之后不会丢失响应性

5. 模板里用 ref 包的对象，不需要 .value，模板自动解包