setup是vue3的语法糖

`setup` 是 Vue 3 中的一个新特性，它是作为 `options API` 的一部分引入的，旨在提供更简洁、模块化的编写组件的方式。它是一个自定义选项钩子，允许开发者将计算属性、数据初始化以及一些轻量级的副作用管理（比如订阅事件）合并到单个函数中，通常放在 `setup()` 函数内。

在传统的 `methods` 和 `data` 里，状态管理和计算可能会变得冗长。通过 `setup`，你可以将这些内容组织得更加清晰，减少模板中的复杂度，并且 `setup` 钩子可以在每个组件实例上运行一次，类似于 React 的 `useEffect` 或者 hooks。

`setup` 的基本结构通常是这样的：

import { ref, onMounted } from 'vue'

export default {
  setup() {
    const count = ref(0) // 创建响应式数据
    onMounted(() => {
      // 初始化或异步操作后的回调
    })
    return {
      count,
      increment: () => (count.value++),
      // 返回的对象会被暴露给模板，供 <template> 使用
    }
  },
}