Vue 3 ref 与 reactive 选哪个？

叫我詹躲躲2025-10-30 11:02

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

`ref`

特点：

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

适用场景：

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

示例：

javascript 复制代码

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 提供了更简洁的语法。

示例：

javascript 复制代码

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 则不需要额外解包。