Vue 3 ref 与 reactive 选哪个？

在 Vue 3 中，ref 和 reactive 都是用于创建响应式数据的方式，但它们在使用场景和特性上有所不同。选择哪一个取决于你的具体需求。

ref

特点：

• 基本类型支持：ref 可以用于任何类型的数据，包括基本类型（如 number, string, boolean）和复杂类型（如 object, array）。
• 包装对象：当你将一个对象传递给 ref 时，它会被包裹在一个对象中，通过 .value 属性来访问和修改值。这使得在函数参数传递和返回值处理时更加方便。
• 模板语法：在模板中使用 ref 时，不需要使用 .value，Vue 会自动解包。

适用场景：

• 当你需要处理基本类型数据时，ref 是更好的选择。
• 在需要明确表示一个响应式变量时，ref 提供了清晰的语义。
• 当你需要将响应式数据作为函数参数或返回值时，ref 的封装特性非常有用。

示例：

import { ref } from 'vue';

const count = ref(0);
console.log(count.value); // 输出: 0
count.value++; // 修改值

function incrementCount(countRef) {
  countRef.value++;
}
incrementCount(count);

reactive

特点：

• 对象和数组：reactive 只能用于对象和数组。如果你尝试将其用于基本类型数据，Vue 会抛出错误。
• 深层响应性：reactive 会递归地将对象的所有属性转换为响应式数据。
• 简洁性：在模板中使用 reactive 创建的对象时，可以直接访问其属性，而不需要额外的解包操作。

适用场景：

• 当你需要处理复杂对象或数组时，reactive 更加适合。
• 当你需要对整个对象进行操作，并且希望所有属性都具有响应性时，reactive 是更好的选择。
• 当你在模板中直接使用对象属性时，reactive 提供了更简洁的语法。

示例：

import { reactive } from 'vue';

const state = reactive({
  count: 0,
  name: 'Vue'
});
console.log(state.count); // 输出: 0
state.count++; // 修改值

function updateState(newState) {
  newState.count++;
  newState.name += ' 3';
}
updateState(state);

总结

• 基本类型：使用 ref。
• 对象和数组：使用 reactive。
• 函数参数和返回值：使用 ref，因为它提供了更好的封装和语义。
• 模板语法：根据需要选择，reactive 在模板中更简洁，而 ref 则不需要额外解包。