reactive是Vue 3中引入的一个函数，它接受一个对象并返回一个响应式代理对象。这使得我们可以更容易地在组件中管理响应式数据。
首先，你需要在你的组件中导入reactive函数。在<script setup>中，你可以这样做：
import { reactive } from 'vue';
然后，你可以使用reactive函数来创建一个响应式对象。例如，创建一个名为state的响应式对象，包含一些属性：
const state = reactive({
message: 'Hello, Vue 3!',
count: 0
});
现在，你可以在模板中使用这些属性，它们将是响应式的。例如：
<template>
<div>
<p>{{ state.message }}</p>
<p>Count: {{ state.count }}</p>
<button @click="state.count += 1">Increment</button>
</div>
</template>
在这个例子中，当你点击按钮时，state.count会增加1，由于它是响应式的，页面会自动更新显示新的计数。
总结一下，使用reactive的核心步骤是：
-
从
vue包中导入reactive函数。 -
在
<script setup>中，使用reactive函数创建一个响应式对象，并传入一个初始对象。 -
在模板中使用这个响应式对象的属性，Vue将处理它们的响应式。
这使得我们在Vue 3中更容易地管理组件的状态，特别是当状态比较复杂时，比如包含多个属性和嵌套对象时。