目录1. 选项式 API（Options API）2. 组合式 API（Composition API）+ 3. 组合式 API（Composition API）+ 普通 4. 函数式组件5. 单文件组件（SFC）与 JSX 结合总结
在 Vue 3 中，定义组件主要有以下几种方式，每种方式都有其适用场景：
1. 选项式 API（Options API）
这是 Vue 2 中就存在的传统方式，通过配置对象定义组件的各种选项。
// MyComponent.vue
export default {
// 组件名称
name: 'MyComponent',
// 数据
data() {
return {
message: 'Hello Vue 3'
}
},
// 计算属性
computed: {
reversedMessage() {
return this.message.split('').reverse().join('')
}
},
// 方法
methods: {
updateMessage() {
this.message = 'Updated!'
}
},
// 生命周期钩子
mounted() {
console.log('Component mounted')
},
// 模板
template: `
<div>
<p>{{ message }}</p>
<p>{{ reversedMessage }}</p>
<button @click="updateMessage">Update</button>
</div>
`
}
适用场景：
迁移 Vue 2 项目到 Vue 3
简单组件或快速原型开发
团队成员更熟悉选项式 API
2. 组合式 API（Composition API）+ <script setup>
这是 Vue 3 推荐的方式，通过 <script setup> 语法糖简化组合式 API 的使用，是目前最常用的组件定义方式。
<!-- MyComponent.vue -->
<template>
<div>
<p>{{ message }}</p>
<p>{{ reversedMessage }}</p>
<button @click="updateMessage">Update</button>
</div>
</template>
<script setup>
import { ref, computed, onMounted } from 'vue'
// 响应式数据
const message = ref('Hello Vue 3')
// 计算属性
const reversedMessage = computed(() => {
return message.value.split('').reverse().join('')
})
// 方法
const updateMessage = () => {
message.value = 'Updated!'
}
// 生命周期钩子
onMounted(() => {
console.log('Component mounted')
})
</script>
特点：
无需显式导出组件
顶层变量和函数自动暴露给模板
更好的类型推断支持
代码组织更灵活，可按逻辑关注点拆分
适用场景：
大多数 Vue 3 新项目
复杂组件（逻辑可拆分重组）
需要更好 TypeScript 支持的项目
3. 组合式 API（Composition API）+ 普通 <script>
不使用 <script setup> 语法糖，显式通过 setup() 函数返回组件选项。
<!-- MyComponent.vue -->
<template>
<div>
<p>{{ message }}</p>
<button @click="updateMessage">Update</button>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
name: 'MyComponent',
setup() {
const message = ref('Hello Vue 3')
const updateMessage = () => {
message.value = 'Updated!'
}
// 必须显式返回供模板使用
return {
message,
updateMessage
}
}
}
</script>
适用场景：
需要在 setup() 之外使用其他选项式 API 选项时
需要更精细控制组件导出时
4. 函数式组件
无状态、无生命周期的轻量级组件，通过函数返回虚拟 DOM。
// FunctionalComponent.js
import { h } from 'vue'
export default function FunctionalComponent(props) {
return h('div', `Hello, ${props.name}`)
}
// 定义 props 类型
FunctionalComponent.props = {
name: {
type: String,
required: true
}
}
在模板中使用：
<template>
<FunctionalComponent name="Vue" />
</template>
特点：
没有响应式状态
没有生命周期钩子
性能更好（适合纯展示组件）
适用场景：
纯展示性组件（如图标、标签）
需要高性能渲染大量相似组件时
5. 单文件组件（SFC）与 JSX 结合
Vue 3 对 JSX 有良好支持，可以在单文件组件中使用 JSX 语法。
<!-- MyComponent.vue -->
<script setup lang="tsx">
import { ref } from 'vue'
const count = ref(0)
const increment = () => {
count.value++
}
// JSX 渲染函数
const render = () => (
<div>
<p>Count: {count.value}</p>
<button onClick={increment}>Increment</button>
</div>
)
export default { render }
</script>
适用场景：
习惯 React 风格开发的团队
需要复杂条件渲染逻辑的组件
总结
推荐使用：<script setup> + 组合式 API（大多数场景）
兼容性需求：选项式 API（Vue 2 迁移项目）
性能敏感：函数式组件（纯展示场景）
特殊需求：JSX 或普通组合式 API
