reactive使用举例【Vue3】

有心还是可以做到的嘛2025-01-06 11:48

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中更容易地管理组件的状态，特别是当状态比较复杂时，比如包含多个属性和嵌套对象时。