在 Vue 3 中，reactive 和 ref 都是用于创建响应式数据的工具，但它们的应用场景和工作方式有所不同。

1. ref 和 reactive 的区别

特性	ref	reactive
用途	用于创建 单一的 基本类型（如数字、字符串、布尔值）或引用类型（如对象或数组）的响应式数据。	用于创建 整个对象 或 数组 的响应式数据。
类型	返回一个对象，包含一个 .value 属性，访问和修改值需要通过 .value。	返回原始对象，自动变为响应式，不需要 .value。
适用数据类型	适用于 基本数据类型（如字符串、数字、布尔值）和 复杂数据类型（如对象或数组）。	适用于 复杂数据类型（对象和数组）。
访问方式	需要通过 .value 来访问或修改数据。	可以直接访问或修改对象的属性。
响应式深度	对于基本数据类型，ref 只能对该数据进行响应式处理；对于对象或数组，ref 会保持对对象的引用。	对对象及其嵌套属性提供深度响应式。

2. ref 的使用场景

ref 用于处理 基本数据类型（如字符串、数字、布尔值）以及 引用类型（如对象或数组）。当我们希望创建单个变量的响应式数据时，通常使用 ref。

基本类型

如果你需要让一个基本数据类型（如数字、字符串、布尔值）变得响应式，使用 ref。

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0); // 创建一个响应式的数字

    const increment = () => {
      count.value++; // 修改时需要通过 `.value` 来访问和设置值
    };

    return { count, increment };
  }
};

引用类型

即使是复杂类型（对象、数组），如果你希望保持对该对象的引用（而不使用 reactive），也可以使用 ref。不过对于对象或数组，通常推荐使用 reactive。

import { ref } from 'vue';

export default {
  setup() {
    const user = ref({ name: 'Alice', age: 25 }); // 通过 ref 创建响应式对象

    const updateName = () => {
      user.value.name = 'Bob'; // 修改属性时要通过 `.value` 访问
    };

    return { user, updateName };
  }
};

3. reactive 的使用场景

reactive 用于 创建整个对象或数组的响应式数据。它适用于对象、数组等复杂数据结构。reactive 会深度地将对象的每个属性变成响应式，所以当对象的嵌套属性发生变化时，watchEffect 或 watch 都能感知到这些变化。

处理对象

如果你需要管理一个复杂对象的多个属性，reactive 是一个更自然的选择，因为它会自动地使整个对象及其嵌套属性变得响应式。

import { reactive } from 'vue';

export default {
  setup() {
    const user = reactive({ name: 'Alice', age: 25 }); // 创建一个响应式对象

    const updateName = () => {
      user.name = 'Bob'; // 可以直接修改对象的属性
    };

    return { user, updateName };
  }
};

处理数组

reactive 同样适用于处理数组数据。与 ref 创建的数组不同，reactive 会直接返回原始数组本身，而不需要 .value 来访问。

import { reactive } from 'vue';

export default {
  setup() {
    const items = reactive([1, 2, 3]);

    const addItem = () => {
      items.push(4); // 可以直接修改数组
    };

    return { items, addItem };
  }
};

4. ref 和 reactive 的组合使用

有时，我们可能会需要将 ref 和 reactive 组合使用。例如，使用 ref 来处理基本数据类型，使用 reactive 来处理对象或数组。在实际开发中，我们可以根据具体情况选择合适的工具来组合使用。

import { ref, reactive } from 'vue';

export default {
  setup() {
    const count = ref(0); // 使用 ref 管理基本类型
    const user = reactive({ name: 'Alice', age: 25 }); // 使用 reactive 管理对象

    const increment = () => {
      count.value++; // 修改 ref 数据时需要使用 `.value`
    };

    const updateName = () => {
      user.name = 'Bob'; // 修改 reactive 数据时直接操作
    };

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

5. 总结与选择建议

场景	使用 ref	使用 reactive
基本数据类型	推荐使用 ref（如 number, string, boolean）	不推荐（因为 reactive 对基本类型没有特殊处理）。
对象类型	适用于希望保持对对象的引用，但仍希望其变为响应式。	推荐使用 reactive，它会自动使整个对象和它的嵌套属性变为响应式。
数组类型	适用于希望保持对数组的引用。	推荐使用 reactive，它直接返回响应式数组。
组合对象和基本数据类型	使用 ref 管理基本数据类型，使用 reactive 管理对象。	使用 reactive 管理对象或数组，使用 ref 管理基本数据类型。

6. 总结

• 使用 ref 来处理 基本数据类型（如数字、字符串、布尔值）和 引用类型的对象或数组。
• 使用 reactive 来处理 复杂对象 或 数组，它会将对象的所有属性都变成响应式的，适合管理包含多个属性的数据结构。
• 在实际开发中，我们可以根据需要将两者结合起来使用，根据数据的复杂性选择合适的响应式 API。