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 等选项定义。
• 如何导出：直接导出一个包含这些选项的对象。

<!-- MyComponent.vue -->
<template>...</template>
<script>
export default {
  data() { return { count: 0 } },
  methods: { increment() { this.count++ } }
}
</script>

2. 使用 setup() 的场景

场景 1：Composition API 组件

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

标准脚本写法

<script>
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    function increment() { count.value++ }
    return { count, increment }
  }
}
</script>

使用 <script setup>

<script setup>
import { ref } from 'vue'

const count = ref(0)
function increment() { count.value++ }
</script>

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

关键区别

什么时候选哪种？

1. 优先 <script setup>：

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

2. 使用 setup() + export default：

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

3. 保留 Options API：

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

示例对比

Options API

<script>
export default {
  data() { return { msg: 'Hello' } },
  mounted() { console.log(this.msg) }
}
</script>

Composition API (标准写法)

<script>
import { ref, onMounted } from 'vue'

export default {
  setup() {
    const msg = ref('Hello')
    onMounted(() => console.log(msg.value))
    return { msg }
  }
}
</script>

<script setup>

<script setup>
import { ref, onMounted } from 'vue'

const msg = ref('Hello')
onMounted(() => console.log(msg.value))
</script>

总结

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