Vue3 中 ref 与 reactive 的使用方法

在 Vue3 的响应式系统中，ref 与 reactive 是两个极为重要的 API，它们为开发者提供了便捷且强大的数据响应式处理能力。

首先来看看 ref。ref 用于定义一个响应式的数据变量。它可以接收任意类型的值，无论是基本数据类型，如数字、字符串，还是复杂的数据结构，像对象和数组。使用时，只需通过 ref() 方法进行包裹即可。例如，const count = ref(0)，这样就创建了一个名为 count 的响应式变量，初始值为 0。在模板中使用时，无需额外操作，直接写 {{ count }} 就能显示其值。

如果要修改 ref 定义的值，直接赋值就行，如 count.value = 1。这里的 .value 是访问和修改 ref 内部值的关键。当值发生变化时，Vue 会自动检测到并更新与之绑定的 DOM 元素。

再说说 reactive。reactive 主要用于创建一个响应式的对象或数组。它接收一个对象或数组作为参数，并返回一个响应式代理。比如 const user = reactive({ name: '张三', age: 25 })，这就创建了一个包含姓名和年龄的响应式用户对象。

在模板中，访问 reactive 数据无需像 ref 那样使用 .value，直接通过对象属性名访问，如 {{ user.name }}。修改 reactive 对象的值也很直观，user.age = 26 即可。Vue 同样会检测到变化并更新视图。

虽然 ref 和 reactive 都能实现数据的响应式，但它们在使用场景上有一些区别。ref 更适合处理单个数据，尤其是基本数据类型，代码结构简单明了。而 reactive 则在处理复杂对象和数组时表现出色，能让数据组织更合理。

在实际开发中，我们常常会根据具体需求灵活选择使用 ref 与 reactive。比如在组件的局部状态管理中，若只是一个简单的计数器，用 ref 就足够；而在管理复杂的用户信息或列表数据时，reactive 会是更好的选择。掌握好这两个 API 的使用方法，能让我们在 Vue3 开发中更加得心应手，高效构建出响应式的应用程序。