Vue3 中 ref 与 reactive 的使用方法

在 Vue3 的响应式系统中，ref 与 reactive 是两个非常重要的 API，它们极大地提升了数据响应式处理的灵活性与便捷性。

首先来看看 ref。ref 主要用于定义一个基本数据类型的响应式数据。比如，我们想要定义一个响应式的数字：

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

这里的 count 就是一个 ref 类型的数据，它通过.value 属性来访问和修改其内部的值。在模板中使用时，无需显式地写.value，Vue 会自动解包：

<template>
  <div>{{ count }}</div>
</template>

如果要在 JavaScript 代码中修改其值，就需要使用.value：

count.value++;

ref 也可以用来包装对象或数组，不过需要注意的是，当深度修改对象或数组内部属性时，需要确保这些操作是在 Vue 的响应式系统能检测到的方式下进行。

接下来讲讲 reactive。reactive 用于创建一个响应式的对象或数组。它直接返回一个代理对象，该对象的属性都是响应式的。例如：

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

在模板中可以直接访问和修改其属性：

<template>
  <div>{{ person.name }} is {{ person.age }} years old.</div>
</template>

在 JavaScript 代码中也直接操作：

person.age++;

reactive 是基于 Proxy 代理实现的，所以它对对象的操作更加自然。不过，reactive 无法直接用于基本数据类型，而 ref 可以弥补这一不足。

在实际项目中，我们常常会根据具体需求来选择使用 ref 还是 reactive。如果是单个基本数据类型，优先选择 ref；如果是复杂的对象或数组结构，则使用 reactive 更合适。掌握好这两个 API 的使用方法，能够让我们在 Vue3 的开发中更加高效地处理数据响应式问题，提升应用的性能与用户体验。无论是小型项目还是大型企业级应用，它们都是构建强大 Vue 应用不可或缺的工具。