通俗易懂解释 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 推荐这种方式特别适合复杂项目

相关新闻

最新新闻

Kimi K3开源大模型:1M上下文本地部署与长文本处理实践

Kimi K3开源大模型:1M上下文本地部署与长文本处理实践

这次我们来看一个备受关注的开源大模型项目——Kimi K3。这个由月之暗面(Moonshot AI)推出的模型最近宣布开源,最引人注目的特点是支持1M(100万)上下文长度,这意味着它能处理约200万汉字的长文本内容。对于…

2026/7/31 4:17:09
小米平板1刷机救砖指南:解决TWRP Error 7与Error 255错误

小米平板1刷机救砖指南:解决TWRP Error 7与Error 255错误

1. 从一次深夜救砖行动说起如果你也像我一样,是个喜欢折腾老旧设备、试图让它们焕发第二春的玩家,那么“刷机”这个词对你来说一定不陌生。它既是乐趣,也是风险。就在上周,我翻出了抽屉里吃灰多年的小米平板1代,想给它…

2026/7/31 4:17:09
华为OD机考双机位C卷:服务器网络连通域解题指南

华为OD机考双机位C卷:服务器网络连通域解题指南

1. 项目概述:华为OD机考双机位C卷实战解析最近在准备华为OD机考的朋友们,应该对"可以组成网络的服务器"这道题目不陌生。作为C卷的经典题型,它考察的是图论中的连通域问题,在实际工作中对应着服务器集群管理、网络拓扑分…

2026/7/31 4:17:09
Java爬虫工程化实践:从HTTP请求到分布式架构的完整指南

Java爬虫工程化实践:从HTTP请求到分布式架构的完整指南

1. 从“数据搬运工”到“信息架构师”:为什么今天还要学Java爬虫?最近在技术社区里,看到不少朋友在讨论Python爬虫,各种框架、库层出不穷,上手快,几行代码就能抓点数据。这让我想起十年前,我刚入…

2026/7/31 4:17:09
Ubuntu下Python虚拟环境搭建:venv、virtualenv与pipenv对比与实践

Ubuntu下Python虚拟环境搭建:venv、virtualenv与pipenv对比与实践

1. 项目概述:为什么我们需要Python虚拟环境?如果你在Ubuntu上写过Python,大概率遇到过这样的场景:项目A需要Django 3.2,项目B需要Django 4.2,而系统全局安装的包版本只有一个。更头疼的是,当你尝…

2026/7/31 4:17:09
ABAP日期处理核心函数与实战技巧全解析

ABAP日期处理核心函数与实战技巧全解析

1. 为什么ABAP日期处理是每个开发者的必修课在SAP ABAP开发的世界里,无论你是刚入门的新手,还是已经摸爬滚打多年的老手,处理日期和时间数据都是绕不开的日常。从最简单的报表显示创建日期,到复杂的生产计划排程、财务期间计算、物…

2026/7/31 4:12:09

月新闻