Vue3 Composition API 深度解析及 Options API 迁移指南

admin 7 1 12 2026-03-21 00:57:26
admin
#1 发表于 2026-03-21 00:57:26

Vue3 引入 Composition API 后，组件逻辑复用和代码组织更加灵活。本文对比两种写法，并给出实际迁移策略。

为何需要 Composition API

  • 逻辑复用困难：Options API 通过 mixins 复用逻辑易导致命名冲突和来源不清晰。

  • 代码碎片化：同一功能的代码被迫分散在 data、methods、mounted 等选项中。

  • 类型推导差：对 TypeScript 支持不够友好。

基本使用对比

Options API 风格

javascript
export default {
  data() {
    return { count: 0, doubled: 0 };
  },
  mounted() {
    this.doubled = this.count * 2;
  },
  methods: {
    increment() {
      this.count++;
      this.doubled = this.count * 2;
    }
  }
}

Composition API 风格（使用 <script setup>）

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

const count = ref(0)
const doubled = computed(() => count.value * 2)

function increment() {
  count.value++
}

onMounted(() => {
  console.log('组件已挂载')
})
</script>

逻辑复用——自定义组合式函数

将鼠标追踪逻辑封装成 useMouse，任意组件都可复用。

javascript
// composables/useMouse.js
import { ref, onMounted, onUnmounted } from 'vue'

export function useMouse() {
  const x = ref(0)
  const y = ref(0)

  function update(e) {
    x.value = e.pageX
    y.value = e.pageY
  }

  onMounted(() => window.addEventListener('mousemove', update))
  onUnmounted(() => window.removeEventListener('mousemove', update))

  return { x, y }
}

迁移策略

  • 新项目：优先使用 Composition API + <script setup>

  • 旧项目：渐进式迁移，在单个组件内尝试将相关逻辑聚合成 setup() 函数，再逐步抽离为组合式函数。

  • 不推荐：在 Options API 内部混用 setup() 返回值，除非作为过渡。

请 登录 后参与讨论