} 改成vue3怎么写

在 Vue 3 中，你可以通过组件化和模板语法来实现类似的功能。Vue3引入了更简洁的API，其中最重要的变化之一是移除了全局`$data`，改用`setup()`函数来替代。以下是创建一个简单的单文件组件（.vue）的基本结构：

<!-- main.vue -->
<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="greet">点击我</button>
  </div>
</template>

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

export default {
  name: 'HelloWorld',
  setup() {
    // 使用ref创建响应式数据
    const message = ref('Hello, Vue!');
    
    // 定义方法
    function greet() {
      message.value = '你好，Vue3!';
    }

    return { message, greet };
  },
};
</script>

<style scoped>
/* 如果需要样式，可以添加在这里 */
</style>

在这个例子中，`<template>`部分是视图层，`<script>`部分包含数据和方法的定义，`<style>`用于样式。`ref`用于声明响应式的变量，`greet`方法绑定了按钮的点击事件。