vue3定义组件的几种方式

[十二]

目录

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