在 Vue 3 中，你可以使用 reactive 函数来创建一个响应式的对象

在 Vue 3 中，你可以使用 reactive 函数来创建一个响应式的对象。与 Vue 2 不同，Vue 3 在处理响应式方面引入了一些改进和变化，其中 reactive 是其中之一。

使用 `reactive`

使用 reactive 函数可以将普通的 JavaScript 对象转换为响应式的对象。这意味着当你修改这个对象的属性时，相关的视图会自动更新。下面是一个简单的示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue 3 Reactive Example</title>
  <!-- 引入 Vue 3 的 CDN 文件 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="app">
    <p>{{ user.name }}</p>
    <p>{{ user.age }}</p>
    <button @click="updateUser">Update User</button>
  </div>

  <script>
    // 创建一个普通的 JavaScript 对象
    const userData = {
      name: 'John Doe',
      age: 30
    };

    // 使用 reactive 函数创建响应式对象
    const reactiveUser = Vue.reactive(userData);

    // 创建 Vue 应用
    const app = Vue.createApp({
      data() {
        return {
          user: reactiveUser
        };
      },
      methods: {
        updateUser() {
          // 修改响应式对象的属性
          this.user.name = 'Jane Smith';
          this.user.age = 25;
        }
      }
    });

    // 挂载 Vue 应用到 #app 元素上
    app.mount('#app');
  </script>
</body>
</html>

在这个示例中：

userData 是一个普通的 JavaScript 对象，包含 name 和 age 属性。
使用 Vue.reactive(userData) 将 userData 转换为一个响应式的对象 reactiveUser。
在 data() 方法中，将 reactiveUser 作为 user 的属性，使其在 Vue 组件中可用。
当点击按钮时，调用 updateUser 方法来更新 user 对象的属性，Vue 会自动更新视图中相关的数据。

注意事项

在 Vue 3 中，使用 reactive 函数创建的对象是深度响应式的。这意味着对象内部的属性也会被监听，当内部属性发生变化时，视图也会相应地更新。
Vue 3 的响应式系统相较于 Vue 2 有着更好的性能和更少的限制，因此 reactive 的使用更加方便和强大。

通过使用 reactive 函数，你可以更加灵活地管理和修改数据，并确保 Vue 3 的响应式系统能够有效地跟踪和更新数据变化。