当前位置：首页 > ops >正文

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

ops 2025/6/27 12:36:41

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>

最佳实践指南

危险操作警示

reactive 的直接替换：

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

解构 reactive 基本类型：

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

混合使用 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`	多个属性更新	⭐⭐⭐
不可变数据	复杂状态更新	⭐⭐⭐⭐

决策流程图

总结与实践建议

黄金法则：
- 基本类型 → ref
- 对象/数组 → reactive
- 需要替换整个对象 → ref
- 需要解构属性 → reactive + toRefs
性能关键点：
- 大型对象使用 shallowRef
- 避免在循环中创建深层 reactive
- 批量更新使用 nextTick

组合函数最佳实践：

// 推荐：返回 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 };
}