reactive 核心要点
reactive 核心要点
1. 基本概念
reactive 是 Vue 3 中创建对象类型响应式数据的 API，专门用于包装对象和数组。
2. 基本用法
import { reactive } from 'vue'// 对象类型
const car = reactive({ brand: '奔驰', price: 100 })// 数组类型
const games = reactive([{ id: '01', name: '王者荣耀' },{ id: '02', name: '原神' }
])// 嵌套对象
const obj = reactive({a: { b: { c: 666 } }
})3. 关键特点
✅ 直接访问和修改
// 读取 - 无需 .value
console.log(car.price) // 100// 修改 - 无需 .value，直接修改
car.price += 10
games[0].name = '流星蝴蝶剑'
obj.a.b.c = 999✅ 深度响应式
- 对象的所有层级都是响应式的
- 修改任意嵌套属性都会触发更新
✅ 模板中直接使用
<template><p>{{ car.brand }} - {{ car.price }}万</p><p>{{ obj.a.b.c }}</p>
</template>4. 与 ref 对比
| 特性 | ref | reactive |
|------|-----|----------|
| 适用类型 | 基本类型 + 对象 | 对象类型 |
| 访问方式 | .value | 直接访问 |
| 模板使用 | 自动解包 | 直接使用 |
| 推荐场景 | 基本类型 | 对象/数组 |
5. 实际应用场景
// ✅ 推荐用 reactive
const user = reactive({ name: '张三', age: 18 })
const list = reactive([1, 2, 3])// ❌ 不推荐用 reactive
const name = reactive('张三') // 用 ref 更好
const count = reactive(100) // 用 ref 更好一句话总结：reactive 是对象类型的"响应式包装器"，直接访问修改，深度响应，适合复杂数据结构。
为什么不推荐用 reactive 包装基本类型？
1. 设计初衷不同
// reactive 设计用于对象
const user = reactive({ name: '张三', age: 18 })// ref 设计用于基本类型
const name = ref('张三')
const age = ref(18)2. 访问方式不一致
// reactive 包装基本类型 - 奇怪
const name = reactive('张三')
console.log(name) // 返回 Proxy 对象，不是字符串// ref 包装基本类型 - 自然
const name = ref('张三')
console.log(name.value) // 返回字符串3. 模板使用问题
// reactive 包装基本类型 - 奇怪
const name = reactive('张三')
console.log(name) // 返回 Proxy 对象，不是字符串// ref 包装基本类型 - 自然
const name = ref('张三')
console.log(name.value) // 返回字符串4. 性能考虑
// reactive 会创建复杂的 Proxy 对象
const name = reactive('张三') // 过度设计// ref 只包装一层
const name = ref('张三') // 简单高效5. 实际对比
// ❌ 不推荐
const name = reactive('张三')
const age = reactive(18)
const isActive = reactive(true)// ✅ 推荐
const name = ref('张三')
const age = ref(18)
const isActive = ref(true)// ✅ 对象用 reactive
const user = reactive({ name: '张三', age: 18 })总结：reactive 是为对象设计的，包装基本类型会导致访问复杂、性能浪费，所以推荐用 ref 处理基本类型。