Vue 3 Composition API 实战：从 Options API 平滑迁移

为什么需要 Composition API

在大型 Vue 2 项目中，Options API 的 data / methods / computed 分离方式会导致相关逻辑分散在各处。Composition API 通过组合式函数（Composables）来解决这个问题。

基础对比

// Options API
export default {
    data() { return { count: 0 } },
    methods: { increment() { this.count++ } }
}

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

逻辑复用

Composition API 最大的优势是可以将可复用的逻辑提取为函数：

// useCounter.js
export function useCounter() {
    const count = ref(0)
    const increment = () => count.value++
    return { count, increment }
}

迁移策略

建议采用渐进式迁移：新功能用 Composition API，旧功能逐步重构。Vue 3 完全兼容 Options API，无需一次性重写所有代码。