在 Vue 3 组合式 API（Composition API）中，<script setup> 和 export default setup() {} 都用于定义组件的逻辑，但它们有一些重要的区别：
1️⃣ <script setup>（推荐）
✅ 更简洁、性能更优，Vue 推荐使用
✅ 不需要 return，变量和方法可以直接在模板中使用
✅ 语法更简洁，没有 export default 也没有 setup() 函数
示例：
<script setup>
import { ref } from "vue";
const count = ref(0);
const increment = () => {
count.value++;
};
</script>
<template>
<button @click="increment">Count: {{ count }}</button>
</template>
🔹 为什么更高效？
- Vue 在编译阶段 处理
setup逻辑，去掉了setup()的额外调用层，提高运行时性能。 - 变量和方法 直接暴露 给模板，无需
return。
2️⃣ export default { setup() { ... } }
✅ 适用于需要 name 选项、组件选项（components、props）的情况
✅ 适用于 script setup 无法处理的某些场景（比如 mixins）
❌ 写法更冗长，必须 return 变量和方法
示例：
<script>
import { ref } from "vue";
export default {
setup() {
const count = ref(0);
const increment = () => {
count.value++;
};
return { count, increment };
}
};
</script>
<template>
<button @click="increment">Count: {{ count }}</button>
</template>
3️⃣ 区别总结
| 特性 | <script setup> | export default setup() |
|---|---|---|
| 语法 | 更简洁，无 setup() | 需要 setup() 并 return |
| 性能 | 更高效（编译优化） | 稍差，多了一层函数调用 |
| 变量和方法使用 | 直接使用，无需 return | 必须 return 变量和方法 |
组件选项（props、emits） | 直接定义 | 通过 setup(props, context) 访问 |
| 适用场景 | 推荐，默认使用 | 需要 mixins、name 等选项时 |
4️⃣ 什么时候用 export default setup()？
尽管 <script setup> 是 推荐方式，但 export default { setup() { ... } } 在一些特殊情况下仍然有用：
- 如果组件需要
name（比如 Vue DevTools 需要name识别组件） - 如果使用
mixins或extends - 如果需要
beforeCreate、created这些选项式 API - 如果是 Vue 2 迁移过来的项目
示例：
<script>
export default {
name: "MyComponent",
setup() {
const message = ref("Hello Vue 3");
return { message };
}
};
</script>
✅ 结论
👉 如果没有特殊需求，优先使用 <script setup>，它更简洁、更高效，也是 Vue 3 推荐的写法。
👉 如果需要 name、mixins、选项式 API，就用 export default { setup() {} }。
