vue3 setup写法

Vue 3 引入了新的 `setup` 函数作为组件编写模式，这是一种轻量级、函数式的方式来替代传统的 `export default {}` 配置。`setup` 函数允许开发者更清晰地组织组件内部状态和生命周期钩子，并通过 `ref`, ` reactive`, 和 `onMounted` 等 hooks 更方便地管理数据。

`setup` 的基本语法如下：

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

// 定义组件数据
const count = ref(0);

// 生命周期挂载阶段操作
onMounted(() => {
  // 在这里初始化数据或执行一些异步操作
});

// 方法
function handleClick() {
  count.value++;
}
</script>

优点包括：
1. **模块化**：将组件逻辑拆分成独立的部分，便于测试和维护。
2. **声明式**：强调数据驱动，减少显式的生命周期控制。
3. **API优化**：引入更简洁的数据管理工具如 `ref` 和 `reactive`，提供更好的响应式体验。