Ref vs. Reactive：Vue 3 响应式变量的最佳选择指南

Ref vs. Reactive：Vue 3 响应式变量的最佳选择指南

在 Vue 3 的 Composition API 中，ref 和 reactive 是创建响应式数据的两种主要方式。许多开发者经常困惑于何时使用哪种方式。本文将深入对比两者的差异，帮助您做出最佳选择。

核心概念解析

1. ref - 值引用容器

import { ref } from 'vue';// 创建 ref
const count = ref(0);// 访问值
console.log(count.value); // 0// 修改值
count.value = 1;

特点：

• 包裹基本类型或对象
• 通过 .value 访问实际值
• 模板中自动解包（无需 .value）

2. reactive - 对象代理

import { reactive } from 'vue';// 创建 reactive 对象
const state = reactive({count: 0,user: {name: 'John',age: 30}
});// 直接访问属性
console.log(state.count); // 0// 修改嵌套属性
state.user.age = 31;

特点：

• 只接受对象类型
• 深度响应式
• 直接访问属性（无需 .value）

底层原理差异

内存结构对比：

五大关键维度对比

1. 数据类型支持

类型	ref 支持	reactive 支持
字符串	✅	❌
数字	✅	❌
布尔值	✅	❌
数组	✅	✅
对象	✅	✅
Map/Set	✅	✅

2. 解构行为对比

ref 的解构问题与解决方案：

const position = {x: ref(0),y: ref(0)
};// 解构后丢失响应性
const { x } = position;// 正确解构方式
const { x } = toRefs(position);

reactive 的解构陷阱：

const state = reactive({ count: 0 });// 解构基本类型属性 - 丢失响应性!
const { count } = state;// 解构对象属性 - 保持响应性
const { user } = state;

3. TypeScript 支持

ref 的类型推导：

const count = ref<number>(0); // Ref<number>// 自动推导
const user = ref({ name: 'John', age: 30 }); // Ref<{ name: string; age: number }>

reactive 的类型限制：

interface State {count: number;user: {name: string;age: number;};
}const state = reactive<State>({count: 0,user: {name: 'John',age: 30}
});

4. 性能考量

创建性能对比（10,000个数据点）：

axis	ref	reactive
series	12	28

更新性能对比：

	更新性能对比
ref基本类型更新	15
ref对象属性更新	22
reactive属性更新	18

5. 模板使用差异

ref 在模板中：

<template><!-- 自动解包，无需 .value --><div>{{ count }}</div><!-- 对象ref需要.value访问属性 --><div>{{ user.value.name }}</div>
</template><script setup>
const count = ref(0);
const user = ref({ name: 'John' });
</script>

reactive 在模板中：

<template><!-- 直接访问属性 --><div>{{ state.count }}</div><div>{{ state.user.name }}</div>
</template><script setup>
const state = reactive({count: 0,user: { name: 'John' }
});
</script>

最佳实践指南

推荐使用 ref 的场景

1. 基本类型值：字符串、数字、布尔值

   const isLoading = ref(false);
   const message = ref('Hello');
   

2. 需要替换整个对象时：

   const user = ref({ name: 'John' });// 完全替换对象
   user.value = { name: 'Alice' };
   

3. 在组合函数中返回值：

   function useCounter() {const count = ref(0);const increment = () => count.value++;return {count,increment};
   }
   

4. 模板引用元素：

   <template><div ref="container"></div>
   </template><script setup>
   const container = ref(null);
   </script>
   

推荐使用 reactive 的场景

1. 复杂状态对象：

   const formState = reactive({username: '',password: '',remember: false
   });
   

2. 需要深度嵌套的结构：

   const appState = reactive({user: {profile: {name: 'John',address: {city: 'New York'}}},settings: { /* ... */ }
   });
   

3. 与第三方库集成：

   const chartData = reactive({labels: ['Jan', 'Feb', 'Mar'],datasets: [{data: [30, 40, 35]}]
   });// 直接传递给图表库
   myChart.update(chartData);
   

危险操作警示

1. reactive 的直接替换：

   let state = reactive({ count: 0 });// 错误！失去响应性
   state = { count: 1 };// 正确做法：修改属性
   state.count = 1;
   

2. 解构 reactive 基本类型：

   const state = reactive({ count: 0 });// 错误！count 失去响应性
   const { count } = state;
   

3. 混合使用 ref 和 reactive：

   const state = reactive({// 避免！导致双重包装counter: ref(0)
   });// 访问变得冗长
   console.log(state.counter.value);
   

高级模式与技巧

1. 使用 toRef 保持响应性

const state = reactive({firstName: 'John',lastName: 'Doe'
});// 将 reactive 属性转为 ref
const firstNameRef = toRef(state, 'firstName');// 修改源属性会更新 ref
state.firstName = 'Jane';
console.log(firstNameRef.value); // 'Jane'// 修改 ref 会更新源属性
firstNameRef.value = 'Alice';
console.log(state.firstName); // 'Alice'

2. toRefs 的强大转换

function useFeature() {const state = reactive({x: 0,y: 0});// 将 reactive 对象转换为 ref 集合return toRefs(state);
}// 在组件中使用
const { x, y } = useFeature();

3. 使用 shallowRef 优化性能

const largeObject = shallowRef({ /* 巨大对象 */ });// 修改内部属性不会触发更新
largeObject.value.nested.prop = 'new value';// 需要强制触发更新
largeObject.value = { ...largeObject.value };

性能优化指南

1. 大型数据集处理

2. 更新策略对比

方法	适用场景	性能影响
ref.value =	基本类型更新	⭐⭐
reactive.prop =	对象属性更新	⭐⭐
Object.assign	多个属性更新	⭐⭐⭐
不可变数据	复杂状态更新	⭐⭐⭐⭐

决策流程图

总结与实践建议

1. 黄金法则：

   • 基本类型 → ref
   • 对象/数组 → reactive
   • 需要替换整个对象 → ref
   • 需要解构属性 → reactive + toRefs

2. 性能关键点：

   • 大型对象使用 shallowRef
   • 避免在循环中创建深层 reactive
   • 批量更新使用 nextTick

3. 组合函数最佳实践：

   // 推荐：返回 ref 或 toRefs 转换
   export function useFeature() {const state = reactive({ x: 0, y: 0 });return toRefs(state);
   }// 或返回 ref 集合
   export function useCounter() {const count = ref(0);return { count };
   }
   

4. 终极建议：

   “在 Vue 3 项目中，我推荐使用 ref 作为默认选择，仅在处理深度嵌套的对象结构时使用 reactive。这种策略简化了代码一致性，减少了 .value 使用的认知负荷，同时保持了灵活性。”

通过理解这些核心差异和应用场景，您将能够更自信地在 Vue 3 项目中选择正确的响应式 API，编写出更高效、更可维护的代码。