vue3 中reactive的使用

在 Vue 3 中，`reactive` 函数可以将一个普通的 JavaScript 对象转换成响应式对象，使其能够在界面中自动更新。使用 `reactive` 函数的步骤如下：

1. 导入 `reactive` 函数：

   import { reactive } from 'vue';

2. 创建一个普通的 JavaScript 对象：

   const myObject = {
     foo: 'bar',
     baz: {
       qux: 'quux'
     }
   };

3. 使用 `reactive` 函数将该普通对象转换为响应式对象：

   const reactiveObject = reactive(myObject);

在转换后，`reactiveObject` 就成为了一个响应式对象，而且它支持 Vue 3 的响应式系统。

4. 在组件中使用响应式对象：

在组件中，可以通过 `setup` 函数来访问响应式对象。例如，下面的代码演示了如何在组件中使用 `reactiveObject`：

   <template>
     <div>
       <p>{{ reactiveObject.foo }}</p>
       <p>{{ reactiveObject.baz.qux }}</p>
     </div>
   </template>
   
   <script>
   import { reactive } from 'vue';
   
   export default {
     setup() {
       const myObject = {
         foo: 'bar',
         baz: {
           qux: 'quux'
         }
       };
   
       const reactiveObject = reactive(myObject);
   
       return {
         reactiveObject
       };
     }
   };
   </script>

在上面的代码中，`reactiveObject` 就是响应式对象，它的属性可以直接在模板中使用，并且当 `myObject` 中的属性值发生变化时，视图会自动更新。