当前位置：首页 > news >正文

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

news 来源：原创 2025/8/26 11:35:42

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

1️⃣ <script setup>（推荐）

2️⃣ export default { setup() { ... } }

3️⃣ 区别总结

4️⃣ 什么时候用 export default setup()？

✅ 结论

相关文章：

1️⃣ `<script setup>`（推荐）

2️⃣ `export default { setup() { ... } }`

4️⃣ 什么时候用 `export default setup()`？