reactive vue3

// reactive.vue

<template>
  <div>
    <p>Message: {{ message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue';

export default {
  name: 'ReactiveExample',
  setup() {
    // 创建一个响应式对象
    const state = reactive({
      message: 'Hello Vue 3!'
    });

    // 定义一个方法来更新 message
    const updateMessage = () => {
      state.message = 'Updated message!';
    };

    // 返回 state 和方法，使其可以在模板中使用
    return {
      ...toRefs(state),
      updateMessage
    };
  }
};
</script>

<style scoped>
/* 样式可以根据需要添加 */
</style>

解释说明：

1. reactive：Vue 3 提供的 Composition API 中的一个函数，用于创建一个响应式的对象。任何对这个对象属性的更改都会触发视图更新。
2. toRefs：将一个响应式对象转换为普通对象，其中每个属性都是一个 ref。这样可以在返回时解构对象而不丢失响应性。
3. setup：这是 Composition API 的入口函数，在组件初始化时执行。在这里定义所有的响应式状态和方法，并返回它们以便在模板中使用。
4. @click：绑定点击事件到 updateMessage 方法，当按钮被点击时，会调用该方法更新 message 属性的值。

通过这种方式，你可以轻松地管理组件的状态并在用户交互时更新视图。