Vue 3 中的 ref 和 reactive

🚀 Vue 3 中的ref和reactive ：一篇搞懂！ 🚀

在 Vue 3 中，ref 和 reactive 是创建响应式数据的两种主要方式。它们有什么区别？该如何选择？今天我们就来彻底搞懂这两个 API！👇

---

1. ref 是什么？

ref 是 Vue 3 提供的一个函数，用于创建一个 响应式引用。

1.1 特点

• 可以包装任意类型的值（包括基本类型和对象）。
• 通过 .value 访问和修改值。
• 适合用于 单个值 的响应式数据。

1.2 示例

import { ref } from 'vue';

const count = ref(0); // 创建一个响应式引用

console.log(count.value); // 访问值
count.value++; // 修改值

---

2. reactive 是什么？

reactive 是 Vue 3 提供的一个函数，用于创建一个 响应式对象。

2.1 特点

• 只能包装对象（包括数组和复杂对象）。
• 直接访问和修改对象的属性。
• 适合用于 复杂对象 的响应式数据。

2.2 示例

import { reactive } from 'vue';

const state = reactive({
  count: 0,
  name: 'Alice',
});

console.log(state.count); // 访问属性
state.count++; // 修改属性

---

3. ref和 reactive的区别

特性	ref	reactive
包装类型	任意类型（基本类型、对象）	只能包装对象
访问方式	通过 .value访问	直接访问属性
适用场景	单个值（如数字、字符串）	复杂对象（如表单、状态管理）
性能	适合简单数据	适合复杂数据

---

4. 如何选择 ref 和 reactive ？

4.1 使用 ref 的场景

• 单个值（如计数器、开关状态）。
• 需要明确区分响应式数据和非响应式数据。

示例：

const count = ref(0);
const isActive = ref(false);

4.2 使用 reactive 的场景

• 复杂对象（如表单数据、状态管理）。
• 需要直接访问和修改对象的属性。

示例：

const form = reactive({
  username: '',
  password: '',
});

const user = reactive({
  name: 'Alice',
  age: 25,
});

---

5. ref和 reactive 的互相转换

5.1 ref 转 reactive

可以将 ref 包装的对象传递给 reactive。

示例：

const count = ref(0);
const state = reactive({ count });

console.log(state.count); // 访问值
state.count++; // 修改值

5.2 reactive 转 ref

可以使用 toRefs 将 reactive 对象的属性转换为 ref。

示例：

const state = reactive({ count: 0 });
const { count } = toRefs(state);

console.log(count.value); // 访问值
count.value++; // 修改值

---

6. 总结

• ref：适合用于单个值的响应式数据，通过 .value 访问和修改。
• reactive：适合用于复杂对象的响应式数据，直接访问和修改属性。
• 选择依据：根据数据的复杂度和使用场景选择合适的 API。

---

如果你对 ref 和 reactive 还有疑问，欢迎在评论区讨论！💬