通俗易懂解释 Vue2 与 Vue3 Options API 与 Composition API 的区别

一、前言Vue 的两种“写法”Options API选项式 API像写填空题把数据、方法、计算属性等分别填到对应的“格子”里。Composition API组合式 API像搭积木把相关的功能逻辑组合在一起更灵活。Vue2 主要使用 Options APIVue3 则同时支持两种但更推荐 Composition API。下面我们用生活中的例子来理解它们的区别。二、Options API按“部门”分工的办公室想象一个公司Options API 就像传统的部门划分export default { // 数据部存放所有数据 data() { return { count: 0, message: Hello } }, // 方法部存放所有方法 methods: { increment() { this.count }, showMessage() { alert(this.message) } }, // 计算属性部存放计算属性 computed: { doubleCount() { return this.count * 2 } }, // 生命周期部组件创建、更新等 mounted() { console.log(组件加载完成) } }特点结构清晰像公司的组织结构图每个“部门”data、methods、computed等职责明确入门简单新手容易理解知道数据放哪里、方法放哪里代码分散一个完整功能可能被拆分到多个“部门”三、Composition API按“项目”组队的创业公司现在想象一个创业公司大家按项目组队import { ref, computed, onMounted } from vue export default { setup() { // 计数器功能一个完整的“项目组” const count ref(0) const doubleCount computed(() count.value * 2) const increment () { count.value } // 消息功能另一个“项目组” const message ref(Hello) const showMessage () { alert(message.value) } // 生命周期 onMounted(() { console.log(组件加载完成) }) // 把功能“打包”返回 return { count, doubleCount, increment, message, showMessage } } }特点逻辑聚合相关代码放在一起像一个完整的“功能包”复用方便可以把功能逻辑提取成独立的函数多处复用类型友好TypeScript 支持更好四、直观对比点餐 vs 自助餐对比维度Options API点餐Composition API自助餐组织方式按类型分类前菜、主菜、甜点分开按功能组合一个套餐包含所有代码复用通过 mixins可能冲突通过组合函数清晰独立阅读体验上下跳转找完整功能要翻页线性阅读一个功能从头看到尾适合场景简单组件、新手学习复杂组件、大型项目、团队协作五、实际例子用户管理功能假设我们要实现一个用户管理功能包含用户列表和搜索Options API 写法export default { data() { return { users: [], // 用户列表数据 searchText: // 搜索关键词 } }, computed: { // 过滤后的用户在 computed 中 filteredUsers() { return this.users.filter(user user.name.includes(this.searchText) ) } }, methods: { // 获取用户数据在 methods 中 async fetchUsers() { this.users await api.getUsers() } }, mounted() { // 初始化在生命周期中 this.fetchUsers() } }问题用户管理功能被拆成了三部分Composition API 写法import { ref, computed, onMounted } from vue // 可以把用户管理逻辑提取成独立函数 function useUserManagement() { const users ref([]) const searchText ref() const filteredUsers computed(() users.value.filter(user user.name.includes(searchText.value) ) ) const fetchUsers async () { users.value await api.getUsers() } onMounted(fetchUsers) return { users, searchText, filteredUsers, fetchUsers } } export default { setup() { const { users, searchText, filteredUsers, fetchUsers } useUserManagement() return { users, searchText, filteredUsers, fetchUsers } } }六、小结Options API 像“分科教学”语文课只教语文数学课只教数学优点是结构清晰缺点是学一个完整项目要跑多个教室Vue2 主要用这种方式Composition API 像“项目式学习”做一个“校园小卖部”项目需要同时用到数学、语文、美术所有相关知识围绕一个目标组织Vue3 推荐这种方式特别适合复杂项目