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

相关新闻

制造业扫码领料方案:从MES/WMS联动到效率提升实战

制造业扫码领料方案:从MES/WMS联动到效率提升实战

1. 为什么我们需要"扫码即走"的物料领用方案在制造业和仓储物流领域,物料领用环节一直是个效率黑洞。传统模式下,工人需要先填写纸质领料单,然后找主管签字审批,最后才能到仓库排队领取物料。整个过程平均耗时15-30分钟…

2026/7/31 3:22:35 阅读更多 →
51单片机AD/DA转换与SPI通信实战:从原理到项目避坑指南

51单片机AD/DA转换与SPI通信实战:从原理到项目避坑指南

1. 从现实世界到数字世界:为什么AD/DA是单片机的“感官”与“喉舌”玩51单片机,我们最常打交道的是数字信号:点亮一个LED,就是给P1口某个引脚一个高电平或低电平;读取一个按键,就是判断某个IO口是1还是0。这…

2026/7/31 3:22:35 阅读更多 →
日本vs欧美彩妆榜单选购指南:从理念差异到实测方法

日本vs欧美彩妆榜单选购指南:从理念差异到实测方法

1. 先搞清楚这场对比到底在比什么看到“日本vs欧美彩妆大赏”这个标题,很多人第一反应可能是“哪个国家的化妆品更好”。但实际对比的核心不是国家优劣,而是两种完全不同的彩妆理念和适用场景。日本cosme大赏更多反映的是本地消费者的真实使用反馈和回购…

2026/7/31 3:22:35 阅读更多 →

最新新闻

西门子S7-1200 PLC数字量I/O接线实战:从原理到避坑指南

西门子S7-1200 PLC数字量I/O接线实战:从原理到避坑指南

1. 项目概述:为什么接线是PLC应用的基石?刚接触西门子S7-1200 PLC的朋友,可能觉得编程才是核心,梯形图、SCL语言、博途软件玩得转就行。但干了十几年自动化,我见过太多项目,问题不是出在复杂的算法上&#…

2026/7/31 3:55:48 阅读更多 →
Nginx 源码编译安装(含第三方模块)完整笔记

Nginx 源码编译安装(含第三方模块)完整笔记

Nginx 源码编译安装(含第三方模块)完整笔记适用系统:CentOS / RHEL 7 目标:编译安装 Nginx,并集成 echo-nginx-module 第三方模块 安装目录:/usr/local/nginx 源码目录:/usr/local/src一、环境准…

2026/7/31 3:55:48 阅读更多 →
【每日一题】LeetCode 347. 前 K 个高频元素 TypeScript

【每日一题】LeetCode 347. 前 K 个高频元素 TypeScript

给你一个整数数组 nums 和一个整数 k ,请你返回其中出现频率前 k 高的元素。你可以按 任意顺序 返回答案。示例 1:输入:nums [1,1,1,2,2,3], k 2输出:[1,2]示例 2:输入:nums [1], k 1输出:[…

2026/7/31 3:55:48 阅读更多 →
16-终端后端-6种运行环境随心选

16-终端后端-6种运行环境随心选

16 终端后端——6种运行环境随心选 小林需要运行一个Python脚本,但不想在本地环境安装依赖,担心污染全局环境。他听说过Docker,但还没配置过。如果告诉他"Hermes可以自动在新创建的Docker容器中运行命令,用完即焚",他会是什么反应?这就是Hermes终端后端能力的…

2026/7/31 3:55:48 阅读更多 →
Turbo Intruder:告别无效并发测试,精准挖掘竞争条件漏洞

Turbo Intruder:告别无效并发测试,精准挖掘竞争条件漏洞

1. 告别无效并发测试:为什么你的并发漏洞挖掘总在“刮痧”?在安全测试的日常里,并发测试是个让人又爱又恨的活儿。爱的是,它往往能揪出那些逻辑复杂、隐蔽性强的业务漏洞,比如并发支付、并发领券、并发修改库存&#x…

2026/7/31 3:55:48 阅读更多 →
【大模型预备1】Ollama 本地部署指南

【大模型预备1】Ollama 本地部署指南

Qwen Ollama 本地部署指南 适配机型: Intel i9-13900H / 16GB DDR5 / RTX 4050 Laptop 6GB / Windows 编写日期: 2026-07-09 目录 一、环境概览与模型选型 二、安装 Ollama 三、部署 Qwen2.5-Coder 模型 四、验证模型服务 五、配置 Qwen Code 本地通道 …

2026/7/31 3:54:48 阅读更多 →

日新闻

物理复制比逻辑复制好在哪?数据库复制原理详解

物理复制比逻辑复制好在哪?数据库复制原理详解

数据库复制是把主库数据同步到备库的机制,分为逻辑复制和物理复制两种。逻辑复制传输的是 SQL 语句或行变更事件,物理复制传输的是存储引擎底层的物理日志。阿里云 PolarDB(云原生数据库)采用物理复制,在同步延迟、数据…

2026/7/31 0:00:34 阅读更多 →
BilibiliDown:3分钟学会B站视频下载的终极指南

BilibiliDown:3分钟学会B站视频下载的终极指南

BilibiliDown:3分钟学会B站视频下载的终极指南 【免费下载链接】BilibiliDown (GUI-多平台支持) B站 哔哩哔哩 视频下载器。支持稍后再看、收藏夹、UP主视频批量下载|Bilibili Video Downloader 😳 项目地址: https://gitcode.com/gh_mirrors/bi/Bilib…

2026/7/31 0:00:34 阅读更多 →
有哪些游戏数据AI平台?游戏行业Data+AI融合方案盘点

有哪些游戏数据AI平台?游戏行业Data+AI融合方案盘点

当前,游戏行业的“DataAI融合”已从概念验证进入价值落地阶段。根据IDC 2025年数据,中国AI游戏云市场规模已达18.6亿元;同时,游戏研发环节AI渗透率高达86%,生成式AI内容普及率超过50%。面对庞大的市场,游戏…

2026/7/31 0:00:34 阅读更多 →

周新闻

深度学习道路桥梁裂缝检测系统 道路桥梁裂缝检测数据集 道路桥梁病害识别检测数据集

深度学习道路桥梁裂缝检测系统 道路桥梁裂缝检测数据集 道路桥梁病害识别检测数据集

深度学习道路桥梁裂缝检测系统 数据集6000张 完整源码已标注数据集训练好的模型环境配置教程程序运行说明文档,可以直接使用!系统支持图片、视频、摄像头等多种方式检测裂缝,功能强大实用。 1数据集6000张 8各类别

2026/7/31 1:03:03 阅读更多 →
深度学习YOLO模型如何训练 PUBG 绝地求生目标检测数据集

深度学习YOLO模型如何训练 PUBG 绝地求生目标检测数据集

pubg数据集 精选原图1.42万数据 1.49万标签 无任何重复、算法增强或冗余图像! pubg绝地求生目标检测数据集 1分类:e_body,14905个标签,txt格式 共计14244张图,99%为640*640尺寸图像 适合yolo目标检测、AI训练关键词&am…

2026/7/29 14:34:28 阅读更多 →
Apex英雄目标检测数据集 深度学习框架YOLO如何训练APEX数据集

Apex英雄目标检测数据集 深度学习框架YOLO如何训练APEX数据集

Apex检测数据集数据集详情检测类别: allies enemy tag图片总量:7247张训练集:5139张验证集:1425张测试集:683张标注状态:全部已标注,即拿即用数据格式:支持YOLO格式及其他格式&#…

2026/7/29 15:00:03 阅读更多 →

月新闻