Vue 3 中reactive 和 ref的区别

---

Vue 3 中 reactive 与 ref 的区别与使用场景

在 Vue 3 中，reactive 和 ref 是两种不同的响应式 API，它们有以下主要区别：

---

1. 使用场景

ref

• 主要用于基本类型数据（如 string、number、boolean）。
• 也可以用于对象，但需要通过 .value 访问。
• 适合单个值的响应式处理。

// ref 示例
const count = ref(0);
const message = ref('hello');
const userInfo = ref({
  name: 'Tom',
  age: 18
});

// 使用时需要 .value
console.log(count.value);
console.log(userInfo.value.name);

reactive

• 专门用于对象类型的数据（包括数组）。
• 直接访问属性，不需要 .value。
• 适合复杂数据结构的响应式处理。

// reactive 示例
const state = reactive({
  count: 0,
  message: 'hello',
  user: {
    name: 'Tom',
    age: 18
  }
});

// 直接访问属性
console.log(state.count);
console.log(state.user.name);

---

2. 访问方式

ref

• 在 setup 中需要通过 .value 访问。
• 在模板中自动解包，不需要 .value。

<script setup>
const count = ref(0);

// setup 中需要 .value
const increment = () => {
  count.value++;
};
</script>

<template>
  <!-- 模板中自动解包，不需要 .value -->
  <div>{{ count }}</div>
</template>

reactive

• 直接访问属性，不需要 .value。
• 在模板和 setup 中的访问方式一致。

<script setup>
const state = reactive({
  count: 0
});

// 直接访问
const increment = () => {
  state.count++;
};
</script>

<template>
  <!-- 直接访问 -->
  <div>{{ state.count }}</div>
</template>

---

3. 解构和赋值

ref

• 可以直接解构，保持响应性。
• 可以直接重新赋值。

const obj = ref({
  count: 0,
  message: 'hello'
});

// ref 可以直接重新赋值
obj.value = { count: 1, message: 'hi' };

reactive

• 解构会失去响应性。
• 不能直接重新赋值整个对象。

const state = reactive({
  count: 0,
  message: 'hello'
});

// ❌ 解构会失去响应性
const { count, message } = state;

// ❌ 不能直接重新赋值
state = { count: 1, message: 'hi' }; // 这样会报错

// ✅ 应该这样更新
Object.assign(state, { count: 1, message: 'hi' });

// 或者
state.count = 1;
state.message = 'hi';

---

4. 建议使用场景

使用 ref 的情况：

• 适用于基本类型数据。
• 需要将响应式变量传递给其他函数。
• 需要重新赋值整个对象。
• 需要保持解构后的响应性。

使用 reactive 的情况：

• 适用于复杂的数据结构。
• 多个相关属性需要一起管理。
• 不需要重新赋值整个对象。
• 不需要解构使用。

---

reactive 和 ref 各自有不同的使用场景，选择合适的 API 可以使你的 Vue 3 项目更高效、更易维护。