前端面试题60（Vue3的ref和reactive有什么区别？在setup中如何选择使用？）

Vue 3 引入了 Composition API，其中 ref 和 reactive 是用于创建响应式数据的关键工具。它们之间的主要区别在于它们处理数据类型的方式和使用的场景。

ref 和 reactive 的区别

1. 数据类型处理:

   • ref 用于创建单个值的响应式引用，无论这个值是基础类型还是复杂类型（对象、数组）。使用 ref 创建的值需要通过 .value 属性来访问和修改。
   • reactive 则用于创建整个对象或者数组的响应式版本。当你用 reactive 包装一个对象时，这个对象及其所有嵌套属性都将变为响应式的，不需要通过 .value 访问。

2. 性能考虑:

   • 对于基础类型，使用 ref 可以避免不必要的性能开销，因为 Vue 3 中的 ref 不需要像 reactive 那样使用 Proxy 代理整个对象。
   • reactive 对于复杂类型（如对象和数组）提供了更深层次的响应性，但这也意味着更多的内存和计算开销。

3. 模板中的使用:

   • 在模板中，ref 需要通过 .value 访问，而 reactive 创建的对象可以直接使用其属性。

如何选择使用 ref 或 reactive

选择使用 ref 还是 reactive 主要取决于你正在处理的数据类型以及你的具体需求：

• 如果你处理的是基本数据类型（如字符串、数字、布尔值），选择 ref。这不仅是因为 ref 更适合处理这类数据，还因为它在模板中使用起来更直观（尽管需要 .value）。

• 如果你处理的是对象或数组，并且希望它们的属性或元素也是响应式的，选择 reactive。这是因为 reactive 能够递归地使对象内的所有属性响应式，无需为每个属性单独创建 ref。

• 如果你需要在响应式对象中包含基本数据类型，并且希望这些基本类型也是响应式的，可以在 reactive 对象中使用 ref。例如，你可能有一个 reactive 对象，其中包含一个 ref 字段，这样就可以在同一个作用域中混合使用 ref 和 reactive。

在 setup 函数中的应用

在 setup 函数中，你可以根据上述原则自由地选择使用 ref 或 reactive。setup 函数的返回值将成为组件的公共属性，可以在模板和其他组件方法中直接访问。例如：

import { ref, reactive } from 'vue';

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

    function increment() {
      count.value++;
      user.age++;
    }

    return {
      count,
      user,
      increment
    };
  }
}

在这个例子中，count 使用 ref 创建，而 user 使用 reactive 创建。这使得 count 可以在模板中通过 {{ count }} 或 {{ count.value }} 访问，而 user 的属性可以直接通过 {{ user.name }} 和 {{ user.age }} 访问。同时，increment 方法可以在模板事件处理器中使用，修改 count 和 user 的值。