reactive 核心要点

1. 基本概念

reactive 是 Vue 3 中创建对象类型响应式数据的 API，专门用于包装对象和数组。

2. 基本用法

javascript 复制代码

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. 关键特点

✅ 直接访问和修改

javascript 复制代码

// 读取 - 无需 .value
console.log(car.price)  // 100

// 修改 - 无需 .value，直接修改
car.price += 10
games[0].name = '流星蝴蝶剑'
obj.a.b.c = 999

✅ 深度响应式

对象的所有层级都是响应式的

修改任意嵌套属性都会触发更新

✅ 模板中直接使用

javascript 复制代码

<template>
  <p>{{ car.brand }} - {{ car.price }}万</p>
  <p>{{ obj.a.b.c }}</p>
</template>

4. 与 ref 对比

| 特性 | ref | reactive |

|------|-----|----------|

| 适用类型 | 基本类型 + 对象 | 对象类型 |

| 访问方式 | .value | 直接访问 |

| 模板使用 | 自动解包 | 直接使用 |

| 推荐场景 | 基本类型 | 对象/数组 |

5. 实际应用场景

javascript 复制代码

// ✅ 推荐用 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. 设计初衷不同

javascript 复制代码

// reactive 设计用于对象
const user = reactive({ name: '张三', age: 18 })

// ref 设计用于基本类型
const name = ref('张三')
const age = ref(18)

2. 访问方式不一致

javascript 复制代码

// reactive 包装基本类型 - 奇怪
const name = reactive('张三')
console.log(name)  // 返回 Proxy 对象，不是字符串

// ref 包装基本类型 - 自然
const name = ref('张三')
console.log(name.value)  // 返回字符串

3. 模板使用问题

javascript 复制代码

// reactive 包装基本类型 - 奇怪
const name = reactive('张三')
console.log(name)  // 返回 Proxy 对象，不是字符串

// ref 包装基本类型 - 自然
const name = ref('张三')
console.log(name.value)  // 返回字符串

4. 性能考虑

javascript 复制代码

// reactive 会创建复杂的 Proxy 对象
const name = reactive('张三')  // 过度设计

// ref 只包装一层
const name = ref('张三')       // 简单高效

5. 实际对比

javascript 复制代码

// ❌ 不推荐
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 处理基本类型。