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

news2025/6/9 3:29:38

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 };
}