Vue2、3 组件定义并导出
在 Vue 开发中，组件是构建用户界面的基本单元。无论是 Vue 2 还是 Vue 3，我们都需要将组件定义并导出，以便在其他地方使用。虽然两者在语法上高度相似，但在组合式 API（Composition API）引入后，Vue 3 的组件导出方式有了更多选择。本文将对比 Vue 2 和 Vue 3 中常见的组件导出写法
Vue 2：选项式 API 导出
提示
在 Vue 2 中，组件通常使用 选项式 API（Options API） 编写，并通过 export default 导出一个包含配置对象的模块：
export default {
name: 'MyComponent',
props: ['title'],
data() {
return {
count: 0
}
},
methods: {
increment() {
this.count++
}
}
}- 这种写法清晰直观，所有逻辑按功能分类（data、methods、computed 等），是 Vue 2 的标准模式
Vue 3：选项式 vs 组合式 API
- Vue 3 同时支持 选项式 API 和 组合式 API（Composition API），因此组件导出方式也更加灵活
1. 选项式 API（兼容 Vue 2 写法）
// Vue 3 完全兼容 Vue 2 的选项式写法：
export default {
name: 'MyComponent',
props: ['title'],
data() {
return {
count: 0
}
},
methods: {
increment() {
this.count++
}
}
}2. 组合式 API（推荐用于复杂逻辑）
- 使用 setup() 函数或 script setup 语法糖，可以更灵活地组织逻辑
import { ref } from 'vue'
export default {
name: 'MyComponent',
props: ['title'],
setup(props) {
const count = ref(0)
const increment = () => {
count.value++
}
return {
count,
increment
}
}
}3.使用setup
<script setup>
import { ref } defineProps(['title'])
const count = ref(0)
const increment = () => count.value++
</script>
<template>
<div>
<h2>{{ title }}</h2>
<p>Count: {{ count }}</p>
<button @click="increment">+</button>
</div>
</template>重要
注意: setup 是编译时语法糖，自动将顶层变量和函数暴露给模板，无需手动 return，也不需要 export default
总结
| 特性 | Vue 2 | Vue 3 |
|---|---|---|
| 主要 API | 选项式 | 选项式 + 组合式 |
| 组件导出 | export default { ... } | export default { ... } 或 <script setup> |
| 逻辑复用 | Mixins | Composables（基于函数） |
| 模板绑定 | 自动绑定 this | setup() 需显式返回；<script setup> 自动暴露 |
版权所有
版权归属：念宇