【无标题】

为什么要有两个响应式工具？

我们可以想象你要存储液体：
🔹 ref 像带刻度的 密封水杯 - 任何液体倒进去都能保持特性，且能看到容量变化
🔹 reactive 像 透明水壶 - 只能装大量液体，但能直接看到内部变化

Vue 3 设计这两个API，就像给我们不同容器的选择权，应对不同开发场景。

---

一、基础认知：它们是什么？

1. ref - 万能容器

// 创建
const age = ref(25)

// 使用
console.log(age.value) // 读取
age.value++           // 修改

特点：
✅ 能装任何类型数据（数字、字符串、对象）
✅ 必须用 .value 访问内容
✅ 修改时自动触发视图更新

2. reactive - 对象专用容器

// 创建
const user = reactive({
  name: '小明',
  job: '前端工程师'
})

// 使用
console.log(user.name) // 直接读取
user.job = '全栈工程师'  // 直接修改

特点：
✅ 专为对象/数组设计
✅ 直接访问属性
✅ 深层嵌套自动响应

---

二、直观对比：5个常见场景解析

场景1：存储用户年龄

// ✅ ref更适合基础类型
const age = ref(18) 

// ❌ reactive需要包装对象
const ageWrapper = reactive({ value: 18 })

场景2：处理用户对象

// ✅ reactive更简洁
const user = reactive({
  name: '张三',
  address: { city: '北京' }
})

// ❌ ref需要多层.value
const userRef = ref({
  name: '李四',
  address: { city: '上海' }
})
console.log(userRef.value.address.value.city) // 错误写法！

场景3：DOM元素引用

<template>
  <!-- ✅ 必须使用ref -->
  <input ref="myInput">
</template>

<script setup>
const myInput = ref(null)
</script>

---

三、避坑指南：新手常见误区

误区1：错误解构对象

const state = reactive({ x: 1, y: 2 })

// ❌ 错误：解构丢失响应性
const { x, y } = state

// ✅ 正确：使用toRefs
const { x, y } = toRefs(state)

误区2：混淆使用方式

const count = ref(0)

// ❌ 忘记.value
console.log(count)   // 输出Ref对象
// ✅ 正确访问
console.log(count.value)

---

四、选择决策树：一图看懂怎么选

要处理的数据类型是什么？
├─ 数字/字符串等基础类型 → 直接选ref
├─ 对象/数组？
│  ├─ 需要完全替换整个对象？ → 选ref
│  └─ 只需修改属性？ → 选reactive
└─ 不确定类型？ → 优先用ref

---

五、最佳实践：推荐用法

组合式函数写法

// 推荐返回ref对象，方便使用者解构
export function useCounter() {
  const count = ref(0)
  
  function increment() {
    count.value++
  }

  return { count, increment }
}

表单处理方案

// reactive适合表单对象
const form = reactive({
  username: '',
  password: '',
  remember: false
})

// 自动监听深层变化
watch(form, () => {
  console.log('表单已更新')
})

---

结语：记住三个原则

1. 简单即美：基础类型无脑用ref
2. 对象优先：处理对象首选reactive
3. 组合自由：两者可以混合使用

就像选择容器装水一样，根据数据特性选择合适的响应式API，能让你的Vue代码更优雅高效！

---

延伸阅读：

• Vue官方响应式文档

---