一句话总结
reactive()：用于对象或数组，返回的是一个原始对象的响应式代理（无需 .value）。
ref()：用于基本类型值（字符串、数字、布尔等）或单个对象引用，返回的是一个带 .value 属性的响应式对象。
基本区别对比
| 特性 | ref() | reactive() |
|---|
| 适用类型 | 基本类型 / 引用类型 | 仅引用类型（对象、数组） |
| 访问值 | 需要 .value | 直接访问属性 |
| 返回值 | 包含 .value 的对象 | 原始对象的响应式代理 |
| 响应式深度 | 深层响应式 | 深层响应式 |
| 结构透明度 | 包装一层 | 不包装（直接操作） |
使用示例
ref()-用于基本类型
import { ref } from 'vue'
const count = ref(0)
console.log(count.value) // 访问值
count.value++ // 修改值
reactive()-用于对象类型
import { reactive } from 'vue'
const state = reactive({
count: 0,
name: 'Vue'
})
console.log(state.count) // 直接访问属性
state.count++ // 修改属性
什么时候用哪个
| 需求 | 用哪个？ | 原因 |
|---|
| 单个数值、字符串、布尔值等 | ref() | 基本类型不能直接 reactive() |
| 对象、数组、嵌套结构 | reactive() | 操作更方便，结构清晰 |
| 引用类型 + 需要赋值整体对象 | ref() | reactive() 不能直接被替换 |
想要 .value 的可控性（如表单元素双向绑定） | ref() | Vue 会自动解包 .value |
| 在模板中访问 | 都可以 | Vue 模板中会自动解包 .value |
