Vue 3 中 `ref` 和 `reactive` 的区别是什么？各自的适用场景？

在 Vue 3 中，ref 和 reactive 是实现响应式数据的核心 API，它们在数据类型支持、访问方式、底层实现及适用场景上存在显著差异。以下是两者的详细对比及适用场景分析：

核心区别

适用场景

ref 的适用场景

1. 基本类型数据
   • 适用于计数器（如 const count = ref(0)）、开关状态（如 const isOpen = ref(false)）、输入框文本等独立值。
   • 示例：
     javascript

     1const count = ref(0);
     2function increment() {
     3  count.value++; // 修改值需通过 .value
     4}
     5

2. 需要整体替换的对象/数组
   • 当需要完全替换一个对象或数组时（如从接口拉取新数据），ref 更灵活。
   • 示例：
     javascript

     1const user = ref({ name: 'Alice', age: 25 });
     2user.value = { name: 'Bob', age: 30 }; // 整体替换保持响应性
     3

3. 引用 DOM 元素
   • 在模板中通过 ref 属性挂载 DOM 元素，并在 JavaScript 中访问。
   • 示例：
     html

     1<template>
     2  <input ref="inputRef" />
     3</template>
     4<script setup>
     5import { ref, onMounted } from 'vue';
     6const inputRef = ref(null);
     7onMounted(() => {
     8  inputRef.value.focus(); // 访问 DOM 元素
     9});
     10</script>
     11

4. 组合式函数返回数据
   • 在组合式函数中返回响应式数据时，使用 ref 可以确保解构后仍保持响应性（需配合 toRefs）。
   • 示例：
     javascript

     1function useCounter() {
     2  const count = ref(0);
     3  return { count }; // 返回的 count 保持响应性
     4}
     5

reactive 的适用场景

1. 复杂对象或嵌套数据结构
   • 适用于表单数据、用户信息、配置对象等关联性强的多字段数据。
   • 示例：
     javascript

     1const form = reactive({
     2  username: '',
     3  password: '',
     4  remember: false
     5});
     6form.username = 'Alice'; // 直接修改属性
     7

2. 数组操作
   • 对数组的增删改查操作（如 push、pop、splice）天然支持响应式。
   • 示例：
     javascript

     1const todos = reactive(['Learn Vue 3', 'Build a project']);
     2todos.push('Deploy to production'); // 数组操作保持响应性
     3

3. 深层嵌套对象
   • 对象的嵌套属性也会被自动代理为响应式，无需额外处理。
   • 示例：
     javascript

     1const nestedData = reactive({
     2  user: {
     3    profile: {
     4      name: 'Alice',
     5      address: { city: 'New York' }
     6    }
     7  }
     8});
     9nestedData.user.profile.address.city = 'Beijing'; // 深层修改仍响应式
     10

4. 模块化状态管理
   • 在大型应用中，可以用 reactive 创建模块化的状态对象，便于维护和扩展。
   • 示例：
     javascript

     1const store = reactive({
     2  user: { name: 'Jane', loggedIn: false },
     3  settings: { theme: 'dark', notifications: true }
     4});
     5function login() {
     6  store.user.loggedIn = true; // 修改嵌套属性
     7}
     8

性能与最佳实践

• 性能差异：ref 和 reactive 的性能差异微小，可忽略不计。ref 对基本类型进行轻量级劫持，对象类型内部调用 reactive；reactive 直接通过 Proxy 代理对象。
• 最佳实践：
  • 基本类型用 ref，复杂对象用 reactive。
  • 解构 reactive 对象时，使用 toRefs 保持响应性。
  • 避免在 reactive 中嵌套 ref（除非明确需要独立引用）。
  • 对大型数据集考虑 shallowRef 或 shallowReactive 提升性能。