vue 中什么场景使用 export default 和setup()

在 Vue 3 中，export default 和 setup() 的使用场景主要取决于你采用的 组件开发模式（Options API 或 Composition API）。以下是具体场景和用法：

1. 使用 export default 的场景

场景 1：Options API 组件

• 传统开发模式：如果你使用 Vue 2 风格的 Options API（基于对象配置），组件的所有逻辑都通过 data、methods、computed 等选项定义。
• 如何导出：直接导出一个包含这些选项的对象。

...export default { data() { return { count: 0 } }, methods: { increment() { this.count++ } }}

2. 使用 setup() 的场景

场景 1：Composition API 组件

• 组合式开发模式：Vue 3 引入的 Composition API 允许你通过 setup() 函数组织逻辑，更适合复杂逻辑复用。
• 如何导出：
  • 如果使用标准的 ，需通过 export default 导出一个包含 setup() 的对象。
  • 如果使用 语法糖，则无需手动导出。

标准脚本写法

import { ref } from \'vue\'export default { setup() { const count = ref(0) function increment() { count.value++ } return { count, increment } }}

使用

import { ref } from \'vue\'const count = ref(0)function increment() { count.value++ }

• 自动处理： 会隐式调用 setup() 并返回变量/方法，无需手动 export default。

关键区别

什么时候选哪种？

1. 优先 ：

   • 新项目推荐使用，语法更简洁，减少样板代码。
   • 适合中小型组件，逻辑集中且易读。

2. 使用 setup() + export default：

   • 需要兼容 TypeScript 类型声明时（如组件参数校验）。
   • 需要显式返回值或访问 this 以外的特殊场景。

3. 保留 Options API：

   • 维护旧项目或团队习惯 Vue 2 风格时。
   • 组件非常简单，仅需少量响应式数据。

示例对比

Options API

export default { data() { return { msg: \'Hello\' } }, mounted() { console.log(this.msg) }}

Composition API (标准写法)

import { ref, onMounted } from \'vue\'export default { setup() { const msg = ref(\'Hello\') onMounted(() => console.log(msg.value)) return { msg } }}

import { ref, onMounted } from \'vue\'const msg = ref(\'Hello\')onMounted(() => console.log(msg.value))

总结

• export default 是所有 Vue 组件的标准导出方式（除非使用 ）。
• setup() 是 Composition API 的核心入口，搭配 export default 使用。
• 是语法糖，简化了 setup() 的书写和导出流程。

名片印刷