vue3中的setup两种形式

Vue 3中的 `setup` 函数有两种常见的形式：

1. **传统的函数式组件**:
在这种形式下，`setup` 是一个普通的 JavaScript 函数，通常位于组件的顶层。它接收 `props`, `context` 和 `setupContext` 作为参数。你可以在这个函数中初始化组件的状态、计算属性以及响应式的依赖项，并通过返回一个对象返回渲染函数 (`render`) 或者模板内容 (`vNode`). 示例：

   setup(props) {
     const count = ref(0);
     function handleClick() {
       count.value++;
     }
     return { render: () => <button @click={handleClick}>点击计数: {count}</button> };
   }

2. **单文件组件** (`.vue` 文件):
Vue 3引入了新的预编译模式，其中 `setup` 被放置在一个特殊的 `<script setup>` 标签内。这使得我们可以直接在模板中使用 `ref`、`reactive` 等响应式API，并且可以省略 `return` 关键字。例如：

   <template>
     <button @click="incrementCount">点击计数</button>
     <p>{{ count }}</p>
   </template>

   <script setup>
     import { ref } from 'vue';
     const count = ref(0);
     function incrementCount() {
       count.value++;
     }
   </script>

注意：在`.vue`文件中，`setup` 会被自动注入到组件实例上，无需显式引用。