vue3 data

// Vue 3 Data 示例代码

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    // 使用 ref 创建一个响应式数据属性
    const message = ref('Hello Vue 3!');

    // 定义一个方法来改变 message 的值
    const changeMessage = () => {
      message.value = 'Hello World!';
    };

    // 返回需要在模板中使用的属性和方法
    return {
      message,
      changeMessage
    };
  }
};
</script>

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

解释说明：

1. ref：用于创建一个响应式的变量。ref 接收一个内部值并返回一个响应式的且可变的引用对象。
2. setup 函数：Vue 3 中 Composition API 的入口点，所有的逻辑都可以在这个函数中编写。
3. message：通过 ref 创建的一个响应式变量，初始值为 'Hello Vue 3!'。
4. changeMessage 方法：当点击按钮时调用此方法，将 message 的值更改为 'Hello World!'。
5. 返回对象：setup 函数返回的对象中的属性和方法可以在模板中直接使用。

如果你需要更多关于 Vue 3 的信息或有其他问题，请告诉我！