Vue3 如何使用 ref 和 reactive？

Question

仓乃文 · Accepted Answer

Vue3 的 ref 和 reactive 是两种创建响应式数据的方式。ref 用于原始类型，reactive 用于对象类型，两者都支持深层响应式。

ref 用法（推荐用于原始类型）：
```javascript
import { ref } from "vue";

const count = ref(0);      // 创建响应式变量
console.log(count.value); // 访问值需要 .value

count.value++;            // 修改值
// 在模板中会自动展开，无需 .value
```

reactive 用法（推荐用于对象）：
```javascript
import { reactive } from "vue";

const state = reactive({
  count: 0,
  name: "张三",
  user: { age: 18 }
});

state.count++;            // 直接访问，不需要 .value
state.user.age = 20;      // 深层响应式
```

补充说明：
- ref 通过创建包含 .value 的对象实现响应式
- reactive 使用 Proxy 代理整个对象，访问属性直接响应
- 建议：原始类型用 ref，对象用 reactive，代码更清晰
- 解构 reactive 对象会丢失响应性，需要使用 toRefs