＜script setup＞和export default { setup() { ... } }区别

在 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() {} }。