vue reactive 和 ref 函数用法的区别

在 Vue 3 的 Composition API 中，reactive 和 ref 都是用于创建响应式数据的核心函数，但它们的使用场景和底层实现有显著区别。以下是详细对比：

1. 核心区别

2. 详细用法对比

(1) reactive

• 作用：将一个对象转换为响应式代理。
• 适用场景：管理复杂对象（如嵌套数据、表单对象）。
• 示例：

  <script setup>
  import { reactive } from 'vue';
  
  const state = reactive({
    count: 0,
    user: { name: 'Alice' }
  });
  
  function increment() {
    state.count++; // 直接修改属性
    state.user.name = 'Bob'; // 嵌套对象自动响应式
  }
  </script>
  
  <template>
    <div>{{ state.count }}</div>
    <div>{{ state.user.name }}</div>
  </template>
  

注意事项：

• 解构会丢失响应式：

  const { count } = state; // 非响应式！
  

  需用 toRefs 包装：

  import { toRefs } from 'vue';
  const { count } = toRefs(state); // 保持响应式
  

(2) ref

• 作用：接受任意值，返回一个响应式的引用对象（通过 .value 访问）。
• 适用场景：
  • 基本类型（如 string、number、boolean）。
  • 需要灵活切换响应式目标（如动态替换对象）。
• 示例：

  <script setup>
  import { ref } from 'vue';
  
  const count = ref(0); // 响应式引用
  const user = ref({ name: 'Alice' });
  
  function increment() {
    count.value++; // 需通过 .value 修改
    user.value.name = 'Bob'; // 对象需通过 .value 访问
  }
  </script>
  
  <template>
    <div>{{ count }}</div> <!-- 模板中自动解包，无需 .value -->
    <div>{{ user.name }}</div> <!-- 嵌套属性自动解包 -->
  </template>
  

注意事项：

• 模板自动解包：在模板中直接使用 ref 时，Vue 会自动解包 .value，无需显式写 .value。
• 对象处理：ref 内部通过 reactive 实现对象的响应式，因此 user.value 实际上是 reactive 对象。

3. 关键场景选择

何时用 reactive？

1. 管理对象或数组：

   const state = reactive({ list: [], meta: {} });
   

2. 需要直接解构响应式属性（配合 toRefs）：

   import { reactive, toRefs } from 'vue';
   const state = reactive({ x: 1, y: 2 });
   const { x, y } = toRefs(state); // 保持响应式
   

何时用 ref？

1. 基本类型数据：

   const count = ref(0);
   const isLoading = ref(false);
   

2. 需要动态替换整个对象：

   const data = ref({ id: 1 });
   data.value = { id: 2 }; // 完全替换
   

3. 在 reactive 中嵌套 ref：

   const state = reactive({
     count: ref(0), // 嵌套 ref
     user: { name: 'Alice' }
   });
   // 访问时需 state.count.value
   

4. 底层原理

• reactive：
  基于 ES6 Proxy 实现，拦截对象的读写操作，实现深度响应式（嵌套对象自动代理）。

• ref：
  通过 getter/setter 包装原始值，返回一个带有 .value 属性的对象。对于对象类型，内部调用 reactive 处理。

5. 常见问题

Q1: 为什么 ref 要通过 .value 访问？

• ref 需要包装任意值（包括基本类型），而 JavaScript 基本类型是按值传递的，无法直接拦截修改。通过 .value 的 getter/setter 实现响应式。

Q2: 在模板中为什么可以省略 .value？

• Vue 模板编译器会自动检测 ref 并解包，等价于：

  count.value; // 编译后模板中的 {{ count }}
  

Q3: 可以混用 reactive 和 ref 吗？

• 可以，但需注意：

  const state = reactive({
    count: ref(0) // 嵌套 ref
  });
  // 访问时需 state.count.value
  

6. 总结

• 优先用 reactive：处理对象时更直观。
• 优先用 ref：需要灵活处理基本类型或动态替换数据时。
• 避免混用：除非明确理解 .value 的行为。