在vue3 setup中使用

在 Vue 3 中，`setup()` 函数是一个新的特性，它是在 Composition API 中引入的，用于组织组件的业务逻辑。相比于传统的 `methods` 和 `data`，`setup()` 提供了更简洁、更模块化的代码组织方式。

`setup()` 函数的主要作用如下：

1. **数据管理**：你可以在这里声明和初始化响应式的数据，例如使用 `ref`, `reactive` 或者 `defineAsyncComponent` 等工具来创建响应式的变量。

const count = ref(0);

2. **副作用函数**：可以定义生命周期钩子函数，如 `onMounted`, `onUpdated`, `onUnmounted`，它们会在对应阶段运行，类似于 `mounted`, `updated`, `beforeDestroy`。

onMounted(() => {
  // 初始化数据或订阅事件等
})

3. **计算属性**：通过 ` computed` 对象声明，它们会自动追踪依赖并更新值。

const fullName = computed(() => `${firstName} ${lastName}`);

4. **组件导入和异步组件**：`defineAsyncComponent` 可以让你在 setup 中异步加载组件。

import MyLazyComponent from './MyLazyComponent.vue';

const lazyComponent = defineAsyncComponent(() => import(MyLazyComponent));