响应式基础：ref 和 reactive 怎么选
响应式基础：ref 和 reactive 怎么选
响应式是 Vue 最核心的概念。数据变了，视图自动跟着变，这就是响应式。
Vue 3 提供了两种创建响应式数据的方式：ref 和 reactive。这篇说说它们是什么、怎么选。
ref：适合基础类型
ref 可以包装任何类型的数据：
import { ref } from 'vue'
const count = ref(0) // 数字
const name = ref('张三') // 字符串
const loading = ref(true) // 布尔值
访问或修改值的时候，要用 .value：
console.log(count.value) // 0
count.value++
console.log(count.value) // 1
为什么？因为 ref 把值包装在一个对象里，通过 .value 来追踪变化。
在模板里不用加 .value，Vue 自动解包：
<template>
<p>{{ count }}</p> <!-- 显示 1，不用写 count.value -->
<button @click="count++">+1</button>
</template>
reactive：适合对象和数组
reactive 只能用于对象和数组：
import { reactive } from 'vue'
const user = reactive({
name: '张三',
age: 25,
hobbies: ['吃饭', '睡觉']
})
console.log(user.name) // 张三
user.age = 26 // 直接改
user.hobbies.push('打豆豆')
访问和修改都不需要 .value，和普通对象一样用。
什么时候用哪个
记住一个原则：
- 基础类型（数字、字符串、布尔值）用
ref - 对象、数组用
reactive
// 推荐
const count = ref(0)
const user = reactive({ name: '张三' })
const list = reactive([1, 2, 3])
// 不推荐：reactive 不支持基础类型
// const count = reactive(0) // 报错
解构的问题
reactive 解构后会丢失响应式：
const user = reactive({ name: '张三', age: 25 })
// 解构后，name 和 age 不再是响应式的
const { name, age } = user
ref 不会有问题：
const user = ref({ name: '张三', age: 25 })
// 解构后仍然是 ref，需要用 .value 访问
const { name, age } = user.value
toRefs：安全解构 reactive
想把 reactive 对象解构成响应式引用，用 toRefs：
import { reactive, toRefs } from 'vue'
const user = reactive({ name: '张三', age: 25 })
const { name, age } = toRefs(user)
// name 和 age 现在是 ref，保持响应式
总结
| 特性 | ref | reactive |
|---|---|---|
| 支持类型 | 任何类型 | 对象、数组 |
| 访问方式 | .value | 直接访问 |
| 模板解包 | 自动 | 自动 |
| 解构 | 保持响应式 | 丢失响应式 |
记住：基础类型用 ref，对象数组用 reactive。
下篇讲模板语法里的指令与插值。