用setup语法糖写

Vue 3引入了一个新的生命周期钩子——`setup()`，这是基于Composition API的一种轻量级语法糖，用于替代传统的选项式组件编写方式。`setup()`的主要作用是在组件实例创建之前执行一些初始配置，类似于React的`useEffect()`和`useState()`。

使用`setup()`语法的优点有：
1. **更简洁**：相比于options API，`setup()`允许你将相关的状态、计算属性和副作用逻辑组织在一起，使得代码更易读且维护。
2. **可组合**：`setup()`可以与其他 Composition API 工具（如`ref()`，`watch()`，`onMounted()`等）无缝结合，提供更灵活的组件构建方式。
3. **更好的模块化**：`setup()`鼓励模块化的编程风格，让每个组件专注于自身的职责。

下面是一个简单的例子，展示了如何使用`setup()`来声明状态和响应式数据：

<template>
  <div>
    {{ message }}
  </div>
</template>

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

const message = ref('');
onMounted(() => {
  setTimeout(() => {
    message.value = 'Hello from Setup!';
  }, 2000);
});
</script>

在这个例子中，`message`是通过`ref()`创建的一个响应式变量，`onMounted`则是Composition API中的生命周期函数，用于在组件挂载完成后执行延迟任务。