reactive 与 ref 的使用场景与区别

在 Vue 3 中，reactive 和 ref 是构建响应式系统的两大核心 API，它们基于 Proxy 实现，让数据变化时视图自动更新。尽管它们都能创建响应式数据，但在使用场景和行为上有显著区别。本节将详细讲解两者的定义、使用方法、适用场景以及关键差异，帮助你选择合适的工具并避免常见误区。

什么是 reactive 和 ref？

1. reactive

reactive 创建一个深层响应式对象，适用于复杂数据结构（如对象或数组）。

import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      name: 'Alice',
      age: 25,
      hobbies: ['reading', 'gaming']
    });

    const updateState = () => {
      state.age++; // 响应式更新
      state.hobbies.push('traveling'); // 数组变更也响应
    };

    return { state, updateState };
  }
};

• 特点：直接操作对象属性即可触发响应，无需额外包裹。
• 限制：只能用于对象类型（包括数组），不支持基本类型（如字符串、数字）。

2. ref

ref 创建一个响应式引用，适用于单一值（包括基本类型和对象），通过 .value 访问和修改。

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const user = ref({ name: 'Bob', age: 30 });

    const increment = () => {
      count.value++; // 通过 .value 修改
      user.value.age++; // 对象属性也通过 .value 访问
    };

    return { count, user, increment };
  }
};

• 特点：灵活性高，支持所有数据类型。
• 限制：需要显式使用 .value，在模板中自动解包。

使用场景

1. reactive 的适用场景

• 复杂状态管理：当数据是一个多层嵌套的对象或数组时，reactive 更自然。

  <template>
    <div>
      <p>{{ profile.name }} - {{ profile.details.age }}</p>
      <button @click="updateProfile">更新</button>
    </div>
  </template>
  
  <script>
  import { reactive } from 'vue';
  
  export default {
    setup() {
      const profile = reactive({
        name: 'Alice',
        details: { age: 25, city: 'New York' }
      });
  
      const updateProfile = () => {
        profile.details.age++;
      };
  
      return { profile, updateProfile };
    }
  };
  </script>
  
• 表单数据：处理多字段表单时，reactive 简化结构。
• 全局状态：配合状态管理（如 Pinia）时，reactive 适合定义复杂 Store。

2. ref 的适用场景

• 单一值：处理独立的数字、字符串或布尔值时，ref 是首选。

  <template>
    <p>计数器：{{ count }}</p>
    <button @click="increment">增加</button>
  </template>
  
  <script>
  import { ref } from 'vue';
  
  export default {
    setup() {
      const count = ref(0);
      const increment = () => count.value++;
      return { count, increment };
    }
  };
  </script>
  
• 独立状态：需要单独跟踪某个状态（如开关状态、输入值）。
• 与 DOM 交互：通过 ref 创建模板引用（注意与响应式 ref 区分）。

  <template>
    <input ref="inputEl" />
    <button @click="focusInput">聚焦</button>
  </template>
  
  <script>
  import { ref } from 'vue';
  
  export default {
    setup() {
      const inputEl = ref(null);
      const focusInput = () => inputEl.value.focus();
      return { inputEl, focusInput };
    }
  };
  </script>
  

reactive 与 ref 的区别

1. 访问方式与解包

• reactive：直接访问属性，模板无需额外处理。
• ref：在 JavaScript 中需 .value，但在模板中 Vue 自动解包。

  <template>
    <p>{{ count }} - {{ state.name }}</p> <!-- 两者在模板中一致 -->
  </template>
  
  <script>
  import { ref, reactive } from 'vue';
  
  export default {
    setup() {
      const count = ref(0);
      const state = reactive({ name: 'Alice' });
      console.log(count.value, state.name); // JS 中不同
      return { count, state };
    }
  };
  </script>
  

2. 深层响应性

• reactive：自动深层响应。
• ref：仅顶层响应，若需深层响应，需嵌套 reactive。

  const obj = ref({ count: 0 });
  obj.value.count = 1; // 不触发响应
  const reactiveObj = reactive({ count: 0 });
  reactiveObj.count = 1; // 触发响应
  

3. 赋值行为

• reactive：不能直接替换整个对象，否则失去响应性。

  const state = reactive({ count: 0 });
  state = { count: 1 }; // 错误：失去响应性
  Object.assign(state, { count: 1 }); // 正确
  
• ref：可直接替换。

  const data = ref({ count: 0 });
  data.value = { count: 1 }; // 正确，仍响应式
  

常见误区与解决方案

1. reactive 丢失响应性

直接替换 reactive 对象会导致响应性丢失：

let state = reactive({ count: 0 });
state = reactive({ count: 1 }); // 丢失响应性

• 解决：使用 Object.assign 或在内部修改。

2. ref 在循环中的使用

在 v-for 中，每个项使用独立 ref 会很繁琐，推荐使用 reactive。

<template>
  <div v-for="item in items" :key="item.id">
    {{ item.name }}
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const items = reactive([
      { id: 1, name: 'Apple' },
      { id: 2, name: 'Banana' }
    ]);
    return { items };
  }
};
</script>

综合示例

结合 reactive 和 ref 实现一个用户信息管理：

<template>
  <div>
    <h1>{{ user.name }} 的信息</h1>
    <p>年龄：{{ user.age }}</p>
    <p>登录次数：{{ loginCount }}</p>
    <button @click="updateUser">更新</button>
  </div>
</template>

<script>
import { reactive, ref } from 'vue';

export default {
  setup() {
    const user = reactive({
      name: 'Alice',
      age: 25
    });
    const loginCount = ref(0);

    const updateUser = () => {
      user.age++;
      loginCount.value++;
    };

    return { user, loginCount, updateUser };
  }
};
</script>

• 效果：点击按钮，年龄和登录次数同步增加。

总结

reactive 和 ref 是 Vue 3 响应式系统的双翼：reactive 适合复杂对象，提供深层响应性；ref 灵活支持单一值，操作更直观。理解它们的区别和适用场景，能帮助你在开发中选择合适的工具。下一节将探讨 computed 和 watch，进一步扩展响应式应用的能力！