当前位置: 首页 > news >正文

【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 的区别

&#x1f308;Don’t worry , just coding! 内耗与overthinking只会削弱你的精力&#xff0c;虚度你的光阴&#xff0c;每天迈出一小步&#xff0c;回头时发现已经走了很远。 &#x1f4d7;概念 vue2中的方式叫Options API &#xff0c;vue3中叫Composition API。 Composition…...

jmeter5.6.3安装教程

一、官网下载 需要提前配置好jdk的环境变量 jmeter官网&#xff1a;https://jmeter.apache.org/download_jmeter.cgi 选择点击二进制的zip文件 下载成功后&#xff0c;默认解压下一步&#xff0c;更改安装路径就行(我安装在D盘) 实用jmeter的bin目录作为系统变量 然后把这…...

关于Spring基础了解

Spring简介 Spring框架是一个开源的Java应用框架&#xff0c;旨在简化企业级应用程序的开发。它提供了一系列强大的工具和服务&#xff0c;帮助开发者构建高质量的Java应用程序。Spring框架的核心理念是使开发过程更加模块化、可测试和可维护。 主要特性 依赖注入&#xff08…...

输入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的属性&#xff0c;方法 Vscode中图标含意 list 与 iterator 的区别&#xff0c;尤其yield的用法 2 方法 知乎搜索DataLoader的属性&#xff0c;方法 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 中用于将数据集拆分为训练集和测试集的函数。这个函数非常有用&#xff0c;因为在机器学习中&#xff0c;我们通常需要将数据集分为训…...

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&#xff08;Structured Query Language&#xff09;作为一种强大的数据库查询语言&#xff0c;广泛应用于各种数据库管理系统中。在SQL查询中&#xff0c;EXISTS子句是一种非常实用的工具&#xff0c;用于检查子查询中是否存在至少一行数…...

33.Java冒泡排序

冒泡排序&#xff1a; 一种排序的方式&#xff0c;对要进行排序的数据中相邻的数据进行两两比较&#xff0c;将较大的数据放在后面&#xff0c;依次对所有的数据进行操作&#xff0c;直至所有数据按要求完成排序. package Javase;import sun.security.util.ByteArrayTagOrder…...

Docker容器ping不通外网问题排查及解决

Docker容器ping不通外网问题排查及解决 解决方案在最下面&#xff0c;不看过程的可直接拉到最下面。 一台虚拟机里突然遇到docker容器一直访问外网失败&#xff0c;网上看到这个解决方案&#xff0c;这边记录一下。 首先需要明确docker的网桥模式&#xff0c;网桥工作在二层…...

JavaScript 库 number-precision 如何使用?

number-precision 是一个 JavaScript 库&#xff0c;主要用于处理 JavaScript 中的数字精度问题。它提供了一些方法&#xff0c;帮助你进行数字运算时保持精度&#xff0c;尤其是在涉及到浮点数运算时&#xff0c;它能够避免传统 JavaScript 中精度丢失的问题。 例如&#xff…...

faiss库中ivf-sq(ScalarQuantizer,标量量化)代码解读-2

文件ScalarQuantizer.h 主要介绍这里面的枚举以及一些函数内容&#xff1a;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 浅复制&#xff1a;dup 方法创建对象的浅复制。 不复制冻结状态&#xff1a;dup 不会复制对象的冻结状态。 不复制单例方法&#xff1a;dup 不会复制对象的单例方法。 deep_dup 深复制&#xff1a;deep_dup 方法创建对象的深复制&#xff0c;递归复制嵌套的对象。…...

原生微信小程序画表格

wxml部分&#xff1a; <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代理池一、引言二、步骤一&#xff1a;获取代理IP1、第一步&#xff1a;爬取代理IP2、第二步&#xff1a;验证代理IP的有效性 三、步骤二&#xff1a;构建IP代理池四、使用示例1、完整的使用示例2、注意事项3、处理网络问题 五、总结 Python实现IP代理池 …...

互联网直播/点播EasyDSS视频推拉流平台视频点播有哪些技术特点?

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

32.4 prometheus存储磁盘数据结构和存储参数

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

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访问端口&#xff08;相当于向外部提供可访问端口&#xff09; 4.将tomcat项目放在服务器tomcat的webapps里面 5.在mysql里创建项目数据库&#xff0c;运行sql创建表和导入数据 6.在配置文…...

[2025CVPR]DeepVideo-R1:基于难度感知回归GRPO的视频强化微调框架详解

突破视频大语言模型推理瓶颈,在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 ​安全措施依赖问题​ GRPO使用min和clip函数限制策略更新幅度,导致: 梯度抑制:当新旧策略差异过大时梯度消失收敛困难:策略无法充分优化# 传统GRPO的梯…...

关于 WASM:1. WASM 基础原理

一、WASM 简介 1.1 WebAssembly 是什么&#xff1f; WebAssembly&#xff08;WASM&#xff09; 是一种能在现代浏览器中高效运行的二进制指令格式&#xff0c;它不是传统的编程语言&#xff0c;而是一种 低级字节码格式&#xff0c;可由高级语言&#xff08;如 C、C、Rust&am…...

【从零学习JVM|第三篇】类的生命周期(高频面试题)

前言&#xff1a; 在Java编程中&#xff0c;类的生命周期是指类从被加载到内存中开始&#xff0c;到被卸载出内存为止的整个过程。了解类的生命周期对于理解Java程序的运行机制以及性能优化非常重要。本文会深入探寻类的生命周期&#xff0c;让读者对此有深刻印象。 目录 ​…...

Linux 中如何提取压缩文件 ?

Linux 是一种流行的开源操作系统&#xff0c;它提供了许多工具来管理、压缩和解压缩文件。压缩文件有助于节省存储空间&#xff0c;使数据传输更快。本指南将向您展示如何在 Linux 中提取不同类型的压缩文件。 1. Unpacking ZIP Files ZIP 文件是非常常见的&#xff0c;要在 …...

libfmt: 现代C++的格式化工具库介绍与酷炫功能

libfmt: 现代C的格式化工具库介绍与酷炫功能 libfmt 是一个开源的C格式化库&#xff0c;提供了高效、安全的文本格式化功能&#xff0c;是C20中引入的std::format的基础实现。它比传统的printf和iostream更安全、更灵活、性能更好。 基本介绍 主要特点 类型安全&#xff1a…...

AD学习(3)

1 PCB封装元素组成及简单的PCB封装创建 封装的组成部分&#xff1a; &#xff08;1&#xff09;PCB焊盘&#xff1a;表层的铜 &#xff0c;top层的铜 &#xff08;2&#xff09;管脚序号&#xff1a;用来关联原理图中的管脚的序号&#xff0c;原理图的序号需要和PCB封装一一…...

JDK 17 序列化是怎么回事

如何序列化&#xff1f;其实很简单&#xff0c;就是根据每个类型&#xff0c;用工厂类调用。逐个完成。 没什么漂亮的代码&#xff0c;只有有效、稳定的代码。 代码中调用toJson toJson 代码 mapper.writeValueAsString ObjectMapper DefaultSerializerProvider 一堆实…...

leetcode_69.x的平方根

题目如下 &#xff1a; 看到题 &#xff0c;我们最原始的想法就是暴力解决: for(long long i 0;i<INT_MAX;i){if(i*ix){return i;}else if((i*i>x)&&((i-1)*(i-1)<x)){return i-1;}}我们直接开始遍历&#xff0c;我们是整数的平方根&#xff0c;所以我们分两…...

【java】【服务器】线程上下文丢失 是指什么

目录 ■前言 ■正文开始 线程上下文的核心组成部分 为什么会出现上下文丢失&#xff1f; 直观示例说明 为什么上下文如此重要&#xff1f; 解决上下文丢失的关键 总结 ■如果我想在servlet中使用线程&#xff0c;代码应该如何实现 推荐方案&#xff1a;使用 ManagedE…...

当下AI智能硬件方案浅谈

背景&#xff1a; 现在大模型出来以后&#xff0c;打破了常规的机械式的对话&#xff0c;人机对话变得更聪明一点。 对话用到的技术主要是实时音视频&#xff0c;简称为RTC。下游硬件厂商一般都不会去自己开发音视频技术&#xff0c;开发自己的大模型。商用方案多见为字节、百…...