【vue for beginner】Composition API 和 Options API 的区别
🌈Don’t worry , just coding!
内耗与overthinking只会削弱你的精力,虚度你的光阴,每天迈出一小步,回头时发现已经走了很远。
📗概念
vue2中的方式叫Options API ,vue3中叫Composition API。
Composition API是大势所趋,但是也不代表Options API 就不好,只是前端发展到一定的程度,之前的Options API写法是一个痛点,每次修改对应的功能需要在文件中依次找到data、methods去修改,效率很低,所以出现了Composition API。
Option API图解
Compostion API图解
💻代码结构
Options API
┌─────────────────────────┐
│ Vue Component │
├─────────────────────────┤
│ data() │
│ ┌─────────────────────┐ │
│ │ { │ │
│ │ message: │ │
│ │ count: 0 │ │
│ │ } │ │
│ └─────────────────────┘ │
├─────────────────────────┤
│ methods │
│ ┌─────────────────────┐ │
│ │ { │ │
│ │ increment() │ │
│ │ } │ │
│ └─────────────────────┘ │
├─────────────────────────┤
│ computed │
│ ┌─────────────────────┐ │
│ │ { │ │
│ │ computedValue │ │
│ │ } │ │
│ └─────────────────────┘ │
└─────────────────────────┘
Composition API
┌─────────────────────────┐
│ Vue Component │
├─────────────────────────┤
│ setup() │
│ ┌─────────────────────┐ │
│ │ const message = │ │
│ │ ref(“Hello, Vue!”)││
│ └─────────────────────┘ │
│ ┌─────────────────────┐ │
│ │ const count = │ │
│ │ ref(0) │ │
│ └─────────────────────┘ │
│ ┌─────────────────────┐ │
│ │ const increment = │ │
│ │ () => { │ │
│ │ count.value++; │ │
│ │ } │ │
│ └─────────────────────┘ │
├─────────────────────────┤
│ return │
│ ┌─────────────────────┐ │
│ │ { │ │
│ │ message, │ │
│ │ increment │ │
│ │ } │ │
│ └─────────────────────┘ │
└─────────────────────────┘
🔍理解
- 只要看到data、methods、computed就是vue2的写法
- 只要看到setup就是vue3的写法
- 项目里有人可能会2种方法混用,别慌,看到哪个关键字就按照哪个逻辑分析
- 非特殊情况,不要写vue2的代码了,迟早要被过度到vue3
Composition API 和 Options API 的区别
定义方式
Options API: 使用对象选项定义组件的各个部分。
Composition API: 使用函数来组织逻辑,更加灵活。
逻辑组织
Options API: 逻辑通常分散在 data, methods, computed 等选项中。
Composition API: 逻辑可以集中在一个函数中,便于复用和维护。
示例对比
Options API 示例
<template><div><h1>{{ message }}</h1><button @click="increment">增加</button></div>
</template><script>
export default {data() {return {message: "Hello, Vue!",count: 0,};},methods: {increment() {this.count++;this.message = `你点击了 ${this.count} 次`;},},
};
</script>
Composition API 示例
<template><div><h1>{{ message }}</h1><button @click="increment">增加</button></div>
</template><script>
import { ref } from 'vue';export default {setup() {const message = ref("Hello, Vue!");const count = ref(0);const increment = () => {count.value++;message.value = `你点击了 ${count.value} 次`;};return {message,increment,};},
};
</script>
关键区别总结
数据定义:
Options API: 使用 data() 返回一个对象。
Composition API: 使用 ref() 或 reactive() 来定义响应式数据。
方法定义:
Options API: 在 methods 中定义。
Composition API: 直接在 setup() 函数中定义。
逻辑复用:
Options API: 使用 mixins。
Composition API: 使用组合函数(composable functions)实现逻辑复用
💡 Tips小知识点
- 要注意在vue3种setup函数必须把需要用到的方法、数据都return出去,不然无法使用
- vue2中的this关键字在vue3中不支持
- setup无法访问到option api写法data、method中的数据和方法,不向前兼容,原理上来说setup执行在beforeEach之前
- option api的method和data中可以访问到setup定义的数据
💪无人扶我青云志,我自踏雪至山巅。
相关文章:

【vue for beginner】Composition API 和 Options API 的区别
🌈Don’t worry , just coding! 内耗与overthinking只会削弱你的精力,虚度你的光阴,每天迈出一小步,回头时发现已经走了很远。 📗概念 vue2中的方式叫Options API ,vue3中叫Composition API。 Composition…...

jmeter5.6.3安装教程
一、官网下载 需要提前配置好jdk的环境变量 jmeter官网:https://jmeter.apache.org/download_jmeter.cgi 选择点击二进制的zip文件 下载成功后,默认解压下一步,更改安装路径就行(我安装在D盘) 实用jmeter的bin目录作为系统变量 然后把这…...
关于Spring基础了解
Spring简介 Spring框架是一个开源的Java应用框架,旨在简化企业级应用程序的开发。它提供了一系列强大的工具和服务,帮助开发者构建高质量的Java应用程序。Spring框架的核心理念是使开发过程更加模块化、可测试和可维护。 主要特性 依赖注入(…...

输入json 达到预览效果
下载 npm i vue-json-pretty2.4.0 <template><div class"newBranchesDialog"><t-base-dialogv-if"addDialogShow"title"Json数据配置"closeDialog"closeDialog":dialogVisible"addDialogShow":center"…...

DataLoade类与list ,iterator ,yield的用法
1 问题 探索DataLoader的属性,方法 Vscode中图标含意 list 与 iterator 的区别,尤其yield的用法 2 方法 知乎搜索DataLoader的属性,方法 pytorch基础的dataloader类是 from torch.utils.data.dataloader import Dataloader 其主要的参数如下&…...
model_selection.train_test_split函数介绍
目录 model_selection.train_test_split函数实战 model_selection.train_test_split函数 model_selection.train_test_split 是 Scikit-Learn 中用于将数据集拆分为训练集和测试集的函数。这个函数非常有用,因为在机器学习中,我们通常需要将数据集分为训…...
Springboot 读取 resource 目录下的Excel文件并下载
代码示例: GetMapping("/download") public void download(HttpServletResponse response) {try {String filename "测试.xls";OutputStream outputStream response.getOutputStream();// 获取springboot resource 路径下的文件InputStream inputStream…...
SQL EXISTS 子句的深入解析
SQL EXISTS 子句的深入解析 引言 SQL(Structured Query Language)作为一种强大的数据库查询语言,广泛应用于各种数据库管理系统中。在SQL查询中,EXISTS子句是一种非常实用的工具,用于检查子查询中是否存在至少一行数…...
33.Java冒泡排序
冒泡排序: 一种排序的方式,对要进行排序的数据中相邻的数据进行两两比较,将较大的数据放在后面,依次对所有的数据进行操作,直至所有数据按要求完成排序. package Javase;import sun.security.util.ByteArrayTagOrder…...
Docker容器ping不通外网问题排查及解决
Docker容器ping不通外网问题排查及解决 解决方案在最下面,不看过程的可直接拉到最下面。 一台虚拟机里突然遇到docker容器一直访问外网失败,网上看到这个解决方案,这边记录一下。 首先需要明确docker的网桥模式,网桥工作在二层…...
JavaScript 库 number-precision 如何使用?
number-precision 是一个 JavaScript 库,主要用于处理 JavaScript 中的数字精度问题。它提供了一些方法,帮助你进行数字运算时保持精度,尤其是在涉及到浮点数运算时,它能够避免传统 JavaScript 中精度丢失的问题。 例如ÿ…...
faiss库中ivf-sq(ScalarQuantizer,标量量化)代码解读-2
文件ScalarQuantizer.h 主要介绍这里面的枚举以及一些函数内容:QuantizerType、RangeStat、ScalarQuantizer、train、compute_codes、decode、SQuantizer、FlatCodesDistanceComputer、get_distance_computer、select_InvertedListScanner QuantizerType 量化类型…...
性能测试工具Grafana、InfluxDB和Collectd的搭建
一、性能监控组成简介 1、监控能力分工:这个系统组合能够覆盖从数据采集、存储到可视化的整个监控流程。Collectd可以收集各种系统和应用的性能指标,InfluxDB提供高效的时序数据存储,而 Grafana 则将这些数据以直观的方式呈现出来。2,实时性能监控:对于需要实时了解系统状…...
【ruby on rails】dup、deep_dup、clone的区别
一、区别 dup 浅复制:dup 方法创建对象的浅复制。 不复制冻结状态:dup 不会复制对象的冻结状态。 不复制单例方法:dup 不会复制对象的单例方法。 deep_dup 深复制:deep_dup 方法创建对象的深复制,递归复制嵌套的对象。…...

原生微信小程序画表格
wxml部分: <view class"table__scroll__view"><view class"table__header"><view class"table__header__item" wx:for"{{TableHeadtitle}}" wx:key"index">{{item.title}}</view></…...

Python实现IP代理池
文章目录 Python实现IP代理池一、引言二、步骤一:获取代理IP1、第一步:爬取代理IP2、第二步:验证代理IP的有效性 三、步骤二:构建IP代理池四、使用示例1、完整的使用示例2、注意事项3、处理网络问题 五、总结 Python实现IP代理池 …...

互联网直播/点播EasyDSS视频推拉流平台视频点播有哪些技术特点?
在数字化时代,视频点播应用已经成为我们生活中不可或缺的一部分。监控技术与视频点播的结合正悄然改变着我们获取和享受媒体内容的方式。这一变革不仅体现在技术层面的进步,更深刻地影响了我们。 EasyDSS视频直播点播平台是一款高性能流媒体服务软件。E…...

32.4 prometheus存储磁盘数据结构和存储参数
本节重点介绍 : prometheus存储磁盘数据结构介绍 indexchunkshead chunksTombstoneswal prometheus对block进行定时压实 compactprometheus 查看支持的存储参数 prometheus存储示意图 内存和disk之间的纽带 wal WAL目录中包含了多个连续编号的且大小为128M的文件,…...

C7.【C++ Cont】范围for的使用和auto关键字
目录 1.知识回顾 2.范围for 格式 使用 运行结果 运行过程 范围for的本意 作用 注意 3.底层分析范围for的执行过程 反汇编代码 分析 4.auto关键字 格式 基本用法 在范围for中使用auto 1.知识回顾 for循环的使用参见25.【C语言】循环结构之for文章 2.范围for C…...

联通云服务器部署老项目tomcat记录
1.先在服务器上安装mysql和tomcat 2.tomcat修改端口 3.在联通云运控平台配置tomcat访问端口(相当于向外部提供可访问端口) 4.将tomcat项目放在服务器tomcat的webapps里面 5.在mysql里创建项目数据库,运行sql创建表和导入数据 6.在配置文…...

遍历 Map 类型集合的方法汇总
1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能,多端兼容
基于 UniApp + WebSocket实现多端兼容的实时通讯系统,涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能,适配微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...

跨链模式:多链互操作架构与性能扩展方案
跨链模式:多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈:模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展(H2Cross架构): 适配层…...

DIY|Mac 搭建 ESP-IDF 开发环境及编译小智 AI
前一阵子在百度 AI 开发者大会上,看到基于小智 AI DIY 玩具的演示,感觉有点意思,想着自己也来试试。 如果只是想烧录现成的固件,乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外,还提供了基于网页版的 ESP LA…...

ServerTrust 并非唯一
NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...
【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张(Windows/Linux)
要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况,可以通过以下几种方式模拟或触发: 1. 增加CPU负载 运行大量计算密集型任务,例如: 使用多线程循环执行复杂计算(如数学运算、加密解密等)。运行图…...
Rapidio门铃消息FIFO溢出机制
关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系,以下是深入解析: 门铃FIFO溢出的本质 在RapidIO系统中,门铃消息FIFO是硬件控制器内部的缓冲区,用于临时存储接收到的门铃消息(Doorbell Message)。…...
稳定币的深度剖析与展望
一、引言 在当今数字化浪潮席卷全球的时代,加密货币作为一种新兴的金融现象,正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而,加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下,稳定…...
Redis:现代应用开发的高效内存数据存储利器
一、Redis的起源与发展 Redis最初由意大利程序员Salvatore Sanfilippo在2009年开发,其初衷是为了满足他自己的一个项目需求,即需要一个高性能的键值存储系统来解决传统数据库在高并发场景下的性能瓶颈。随着项目的开源,Redis凭借其简单易用、…...
根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的----NTFS源代码分析--重要
根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的 第一部分: 0: kd> g Breakpoint 9 hit Ntfs!ReadIndexBuffer: f7173886 55 push ebp 0: kd> kc # 00 Ntfs!ReadIndexBuffer 01 Ntfs!FindFirstIndexEntry 02 Ntfs!NtfsUpda…...