Vue3 响应式 API (reactive) 使用指南

Vue3 的 reactive API 是一个用于创建响应式对象的函数。它接受一个普通对象作为参数，并返回一个响应式代理对象，可以通过这个代理对象访问普通对象的属性和方法。在响应式代理对象上的所有修改都会被自动追踪和响应，而且是基于 Proxy API 实现的。

下面是使用 Vue3 reactive API 的基本示例：

import { reactive } from 'vue';

const state = reactive({
  count: 0,
  message: 'Hello, Vue3!',
});

console.log(state.count); // 0

state.count++;

console.log(state.count); // 1

在上面的示例中，我们先引入了 Vue3 的 reactive API，然后使用 reactive 函数创建了一个响应式代理对象 state，它包含了两个属性 count 和 message。我们可以通过 state.count 访问 count 属性，并对它进行修改。修改后，我们再次输出 state.count 的值，发现它已经变成了 1。

需要注意的是，我们只能在 reactive 代理对象上访问和修改普通对象的'可响应'属性，也就是那些在创建代理对象时就已经存在的属性。如果我们想要添加一个新的属性，需要使用 Vue3 的 ref API 或者创建一个新的 reactive 对象。

const state = reactive({
  count: 0,
  message: 'Hello, Vue3!',
});

// 添加一个新的属性
state.name = 'Vue3';

console.log(state.name); // Vue3

总之，Vue3 的 reactive API 是一个非常强大和方便的工具，可以让我们轻松地创建和管理复杂的响应式数据结构。