Vue 3 中的 ref 和 reactive 有什么区别？
Vue 3 引入了 Composition API，作为对传统 Options API 的补充。在 Composition API 中，ref 和 reactive 是两个核心的函数，用于创建响应式数据。虽然它们的目标都是使数据变得响应式，但它们在使用方式和行为上有一些不同。
1. 基本概念
- ref ：
ref通常用于处理基本类型的数据，如数字、字符串、布尔值等。它接受一个参数，并返回一个响应式且可变的对象，该对象具有一个名为value的属性，用于访问或修改其值。 - reactive ：
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. 解构和类型推断
- 当使用 TypeScript 时，
ref提供了更好的类型推断支持。你可以很容易地推断出ref对象的类型，并通过类型注解来指定其值的类型。而reactive在这方面则稍显不足，因为你需要对整个对象进行类型注解，而不是仅仅对其属性进行注解。 - 另一个与 TypeScript 相关的优点是
ref可以更容易地进行解构。由于ref对象只有一个value属性，因此你可以很容易地将其解构到变量中，并保持其响应性。而reactive对象则不支持这种解构方式，因为解构会破坏其响应性。为了解决这个问题，你可以使用toRefs函数将reactive对象转换为ref对象的集合，然后再进行解构。
5. 使用场景
- 对于简单的响应式数据（如基本类型），使用
ref通常更方便。你可以直接通过.value来访问或修改其值，而不需要担心对象的嵌套结构。 - 对于复杂的数据结构（如对象、数组等），使用
reactive可能更合适。你可以直接操作返回的对象，就像操作普通对象一样，而不需要通过.value属性。此外，reactive还提供了更强大的功能，如嵌套属性的响应性、数组的响应性方法等。 - 在实际开发中，你可以根据具体的需求和数据结构来选择使用
ref还是reactive。在某些情况下，你可能甚至需要将它们结合使用，以充分利用它们的优点。
6. 总结
虽然 ref 和 reactive 都是 Vue 3 中用于创建响应式数据的函数，但它们在使用方式和行为上有一些不同。ref 更适用于处理基本类型的数据，并通过 .value 属性来访问或修改其值；而 reactive 则更适用于处理复杂的数据结构，并直接操作返回的对象。在选择使用哪个函数时，你需要考虑数据的类型、结构以及你的具体需求。同时，你还需要注意它们与 TypeScript 的兼容性以及解构和类型推断等方面的差异。