Vue 3 中的 ref 和 reactive 有什么区别？
Vue 3 引入了 Composition API，作为对传统 Options API 的补充。在 Composition API 中，ref 和 reactive 是两个核心的函数，用于创建响应式数据。虽然它们的目标都是使数据变得响应式，但它们在使用方式和行为上有一些不同。
1. 基本概念
ref 通常用于处理基本类型的数据，如数字、字符串、布尔值等。它接受一个参数，并返回一个响应式且可变的对象，该对象具有一个名为 value 的属性，用于访问或修改其值。reactive 则更适用于处理复杂的数据结构，如对象、数组等。它接受一个对象，并返回一个响应式的代理对象，你可以直接操作这个代理对象，而不需要通过 value 属性。2. 使用方式
使用 ref 时，你需要通过 .value 来访问或修改其内部的值。例如：
javascript复制代码
import { ref } from 'vue' | |
const count = ref(0) | |
console.log(count.value) // 0 | |
count.value++ |
使用 reactive 时，你可以直接操作返回的对象，就像操作普通对象一样。例如：
javascript复制代码
import { reactive } from 'vue' | |
const state = reactive({ count: 0 }) | |
console.log(state.count) // 0 | |
state.count++ |
3. 响应性行为
ref 和 reactive 创建的数据都是响应式的，意味着当它们的值发生变化时，任何依赖于这些数据的 Vue 组件都将重新渲染。ref 实际上是通过 reactive 实现的。当你创建一个 ref 时，Vue 实际上是在内部创建了一个响应式的对象，该对象具有一个名为 value 的属性，该属性的值就是你传递给 ref 的参数。reactive 返回的是一个代理对象，因此它支持所有的对象操作，如属性访问、赋值、删除等，并且这些操作都是响应式的。然而，当你尝试修改或访问一个不存在的属性时，Vue 将不会发出警告，这可能会导致一些难以追踪的错误。为了解决这个问题，Vue 提供了 toRefs 和 toRef 函数，可以将 reactive 对象转换为 ref 对象，以便更安全地访问和修改属性。4. 解构和类型推断
ref 提供了更好的类型推断支持。你可以很容易地推断出 ref 对象的类型，并通过类型注解来指定其值的类型。而 reactive 在这方面则稍显不足，因为你需要对整个对象进行类型注解，而不是仅仅对其属性进行注解。ref 可以更容易地进行解构。由于 ref 对象只有一个 value 属性，因此你可以很容易地将其解构到变量中，并保持其响应性。而 reactive 对象则不支持这种解构方式，因为解构会破坏其响应性。为了解决这个问题，你可以使用 toRefs 函数将 reactive 对象转换为 ref 对象的集合，然后再进行解构。5. 使用场景
ref 通常更方便。你可以直接通过 .value 来访问或修改其值，而不需要担心对象的嵌套结构。reactive 可能更合适。你可以直接操作返回的对象，就像操作普通对象一样，而不需要通过 .value 属性。此外，reactive 还提供了更强大的功能，如嵌套属性的响应性、数组的响应性方法等。ref 还是 reactive。在某些情况下，你可能甚至需要将它们结合使用，以充分利用它们的优点。6. 总结
虽然 ref 和 reactive 都是 Vue 3 中用于创建响应式数据的函数，但它们在使用方式和行为上有一些不同。ref 更适用于处理基本类型的数据，并通过 .value 属性来访问或修改其值；而 reactive 则更适用于处理复杂的数据结构，并直接操作返回的对象。在选择使用哪个函数时，你需要考虑数据的类型、结构以及你的具体需求。同时，你还需要注意它们与 TypeScript 的兼容性以及解构和类型推断等方面的差异。