在 Vue.js 框架中，Composition API 和 Options API 是两种不同的代码组织方式，主要区别在于逻辑复用、代码结构和灵活性。以下是详细对比：

---

1. 核心区别对比表

特性	Options API (Vue 2 默认)	Composition API (Vue 3+ 新增)
代码组织方式	按选项（data, methods等）分离	按逻辑功能聚合（基于函数）
逻辑复用	Mixins 或高阶组件（易冲突）	自定义组合式函数（composables）
TypeScript 支持	较弱（类型推断有限）	强类型支持
响应式数据管理	data() 返回响应式对象	ref() 和 reactive() 显式声明
生命周期钩子	选项式（如 mounted()）	函数式（如 onMounted()）
代码可读性	简单场景直观，复杂场景分散	复杂场景更易维护
适用场景	小型项目、快速原型	中大型项目、复杂逻辑

---

2. 代码结构对比

Options API（基于选项的分隔）

export default {
    data() {
        return {
            count: 0,
            message: 'Hello'
        }
    },
    methods: {
        increment() {
            this.count++
        }
    },
    computed: {
        reversedMessage() {
            return this.message.split('').reverse().join('')
        }
    },
    mounted() {
        console.log('Component mounted')
    }
}

Composition API（基于逻辑的聚合）

import {ref, computed, onMounted} from 'vue'

export default {
    setup() {
        // 数据声明
        const count = ref(0)
        const message = ref('Hello')

        // 计算属性
        const reversedMessage = computed(() =>
            message.value.split('').reverse().join('')
        )

        // 方法
        function increment() {
            count.value++
        }

        // 生命周期钩子
        onMounted(() => {
            console.log('Component mounted')
        })

        // 暴露给模板
        return {count, message, reversedMessage, increment}
    }
}

---

3. 核心优势对比

Options API

• 简单直观：适合新手，通过选项快速定位代码位置。
• 低心智负担：无需手动管理响应式依赖。
• 向后兼容：Vue 2 和 Vue 3 均支持。

Composition API

• 逻辑复用：通过 composables 实现无冲突复用（如 useUser()、useFetch()）。
• 类型安全：更好的 TypeScript 集成。
• 灵活组织：将相关逻辑集中（如用户认证、数据请求）。
• 细粒度控制：手动管理响应式依赖（watchEffect、watch）。

---

4. 逻辑复用示例

Options API（Mixins 的局限）

// mixins/userMixin.js
export default {
    data() {
        return {user: null}
    },
    methods: {
        async fetchUser(id) {
            this.user = await fetch(`/users/${id}`)
        }
    }
}

// 组件中使用
export default {
    mixins: [userMixin],
    mounted() {
        this.fetchUser(1)
    }
}

问题：命名冲突、来源不透明。

Composition API（组合式函数）

// composables/useUser.js
import {ref} from 'vue'

export function useUser() {
    const user = ref(null)
    const fetchUser = async (id) => {
        user.value = await fetch(`/users/${id}`)
    }
    return {user, fetchUser}
}

// 组件中使用
import {useUser} from './composables/useUser'

export default {
    setup() {
        const {user, fetchUser} = useUser()
        fetchUser(1)
        return {user}
    }
}

优势：明确依赖、无命名冲突。

---

5. 如何选择？

• 使用 Options API：
  • 小型项目或简单组件。
  • 团队熟悉 Vue 2 且无升级计划。
• 使用 Composition API：
  • 复杂逻辑或大型项目。
  • 需要 TypeScript 支持。
  • 需要高复用性的功能模块。

---

6. 混合使用策略

Vue 3 允许两种 API 共存：

export default {
    data() {
        return {legacyData: 'old'}
    },
    setup() {
        const compositionData = ref('new')
        return {compositionData}
    }
}

---

总结：Composition API 是 Vue 3 推荐的未来方向，尤其适合复杂场景，而 Options API 在简单场景仍有优势。根据项目规模和团队熟悉度选择即可。