Vue3 中 ref 与 reactive 的使用方法

在 Vue3 的响应式系统中，ref 与 reactive 是两个至关重要的函数，它们为开发者提供了便捷的状态管理方式。

首先来看看 ref。ref 函数用于创建一个响应式的数据引用。它接收一个初始值，可以是基本数据类型，如 Number、String、Boolean 等，也可以是复杂的数据结构如对象或数组。例如：

import { ref } from 'vue';
const count = ref(0);
const message = ref('Hello Vue3');

在模板中使用 ref 定义的数据时，不需要额外的操作，直接使用即可。如：<div>{{ count }}</div>。而在 JavaScript 代码中访问 ref 的值时，需要通过 .value 来获取，比如 console.log(count.value)。当 ref 的值发生变化时，Vue 会自动检测到并更新与之绑定的 DOM 元素。

再说说 reactive。reactive 函数用于创建一个响应式的对象或数组。它接收一个普通的对象或数组作为参数，并返回一个响应式的代理对象。示例如下：

import { reactive } from 'vue';
const user = reactive({
  name: 'John',
  age: 30
});

在模板和 JavaScript 代码中使用 reactive 创建的数据时，不需要像 ref 那样使用 .value。例如在模板中 <div>{{ user.name }}</div>，在 JavaScript 中直接修改属性 user.age = 31。Vue 同样会自动追踪 reactive 对象的属性变化，并更新相关 DOM。

需要注意的是，ref 和 reactive 虽然都能实现响应式，但在使用场景上有所不同。ref 更适合处理基本数据类型，或者在需要独立管理一个简单状态时使用；而 reactive 则更适合处理复杂的对象和数组，将相关的数据组织在一起进行管理。

在实际开发中，合理运用 ref 与 reactive，能够使代码结构更加清晰，提升开发效率。理解它们的工作原理和使用场景，也是深入掌握 Vue3 响应式系统的关键。无论是构建小型项目还是大型应用，熟练运用这两个函数，都能让我们更好地实现数据与视图的双向绑定，打造出更加流畅、交互性强的用户界面。