在vue3中 <script setup> 下怎么使用？ export default 和 setup

在Vue 3中，`<script setup>` 是一种新的脚本标签，用于简化组件的编写方式。它允许你在脚本部分直接定义组件的变量、计算属性和事件处理器，而无需使用传统的`export default`和`methods`对象。

**使用示例**:

1. **引入 `ref` 或其他工具库**[^1]:

   <template>
     <div id="app">
       {{ count }}
       <button @click="add">点击增加</button>
     </div>
   </template>
   
   <!-- script setup -->
   <script setup>
     import { ref } from "vue";

     // 定义一个响应式的计数器变量
     const count = ref(0);

     // 直接定义事件处理器，无需返回一个函数
     function add() {
       count.value++; 
     }
   </script>

2. **组件名称自动推断** - 当你在文件中看到`<script setup>`时，Vue会尝试推测组件名称，通常是文件名（不带扩展名），如果文件中有多个`<template>`，则可能需要明确指定组件名称。

**关于`export default`与`setup`的区别**:

- **`export default`**: 这种传统方式适用于旧版本的Vue，它不仅定义组件的行为（如方法），还包含了组件的状态（如通过`data`函数定义的变量）。在`setup`语法下，状态通常通过`ref`、`reactive`等API来管理。

- **`setup`**: 使用`<script setup>`的组件不需要显式导出，你可以在`setup`内直接访问模板内的元素并定义行为，这使得代码更简洁易读。然而，如果你需要导出组件实例供外部使用，可以通过`setup`返回一个对象，但这种情况相对较少见。