vue3 ref和reactive的区别

在 Vue 3 中，ref 和 reactive 都是用来创建响应式数据的 API，但是它们有一些区别：

1. ref

• ref 主要用于原始类型（如 string、number、boolean 等）或 对象 的响应式引用。
• 它会将原始数据包装成一个包含 .value 属性的响应式对象。
• 如果是对象类型的数据，ref 会将对象包装成一个对象，并通过 .value 访问和修改数据。

import { ref } from 'vue';

const count = ref(0);  // 原始类型
const user = ref({ name: 'Alice' });  // 对象类型

console.log(count.value);  // 访问原始值
count.value = 1;  // 修改原始值

console.log(user.value.name);  // 访问对象属性
user.value.name = 'Bob';  // 修改对象属性

2. reactive

• reactive 用于创建对象或数组的响应式引用。
• 它直接返回原始对象（或数组）的响应式版本，不需要通过 .value 来访问数据。

import { reactive } from 'vue';

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

console.log(state.count);  // 直接访问属性
state.count = 1;  // 修改属性
console.log(state.user.name);  // 直接访问对象属性
state.user.name = 'Bob';  // 修改对象属性

3. 总结

• ref 适用于原始数据类型（如数字、字符串、布尔值）或包装对象，并且访问这些数据时需要使用 .value。
• reactive 适用于创建响应式对象或数组，直接操作原始对象的数据，不需要 .value。

通常，reactive 更适合用于管理复杂的数据结构（如对象或数组），而 ref 更多用于单一的原始数据或是单独引用一个对象。