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

Vue.js 什么是 Composition API？

news 来源：原创 2025/7/5 1:32:52

Vue.js 什么是 Composition API？

今天我们来聊聊 Vue 3 引入的一个重要特性：组合式 API（Composition API）。如果你曾在开发复杂的 Vue 组件时感到代码难以维护，那么组合式 API 可能正是你需要的工具。

什么是组合式 API？

组合式 API 是 Vue 3 提供的一套基于函数的 API，允许开发者以更灵活的方式组织组件逻辑。与传统的选项式 API（Options API）不同，组合式 API 使我们能够根据功能将相关代码组合在一起，提升代码的可读性和可维护性。

为什么引入组合式 API？

在使用选项式 API 时，组件的逻辑通常分散在不同的选项中（如 data、methods、computed 等）。当组件变得复杂时，相关逻辑可能被拆散，导致代码难以阅读和维护。组合式 API 通过允许我们将相关逻辑集中在一起，解决了这一问题。

组合式 API 的核心概念

  1. setup 函数

    setup 是组合式 API 的入口函数。它在组件实例创建之前执行，用于初始化组件的 props、状态和逻辑。

    <script setup>
import { ref } from 'vue';// 定义一个响应式变量
const count = ref(0);// 定义一个方法来更新变量
function increment() {count.value++;
}
</script><template><div><p>当前计数：{{ count }}</p><button @click="increment">增加</button></div>
</template>

    在上述示例中，setup 函数使用 ref 创建了一个响应式变量 count，并定义了一个方法 increment 来更新该变量。

  2. 响应式 API

    组合式 API 提供了 ref 和 reactive 等函数来创建响应式状态：

    • ref：用于创建包含单一值的响应式引用。

      const count = ref(0);
console.log(count.value); // 输出: 0

    • reactive：用于创建包含多个属性的响应式对象。

      const user = reactive({name: 'Alice',age: 25
});
console.log(user.name); // 输出: Alice

  3. 生命周期钩子

    在组合式 API 中，生命周期钩子以函数形式提供，例如 onMounted、onUpdated 和 onUnmounted。

    import { onMounted } from 'vue';onMounted(() => {console.log('组件已挂载');
});

组合式 API 的优势

  • 更好的代码组织：将相关逻辑集中在一起，提升代码可读性。
  • 逻辑复用：通过创建可复用的函数，实现逻辑的共享和复用。
  • TypeScript 支持：组合式 API 对 TypeScript 具有更好的支持，提供了更强的类型推断和检查。

总结
组合式 API 为 Vue 开发者提供了一种更灵活、高效的方式来组织和复用代码。通过掌握组合式 API，你可以更轻松地管理复杂组件的逻辑，提高代码的可维护性和可读性。

相关文章：

Vue.js 什么是 Composition API？

Vue.js 什么是 Composition API&#xff1f; 今天我们来聊聊 Vue 3 引入的一个重要特性&#xff1a;组合式 API&#xff08;Composition API&#xff09;。如果你曾在开发复杂的 Vue 组件时感到代码难以维护&#xff0c;那么组合式 API 可能正是你需要的工具。 什么是组合式 …...

编程日记 2025/7/5 1:32:52

关于产品和技术架构的思索

技术架构或者设计应该和产品设计分离&#xff0c;但是又不应该和产品架构独立。 听起来非常的绕并且难以理解。 下面我们用一个例子来解读这两者的关系 产品&#xff08;族谱图&#xff09; 如果把人类当作产品&#xff0c;那设计师应该是按照上面设计的(当然是正常的伦理道德)…...

编程日记 2025/7/5 1:00:06

Python设计模式 - 组合模式

定义 组合模式&#xff08;Composite Pattern&#xff09; 是一种结构型设计模式&#xff0c;主要意图是将对象组织成树形结构以表示"部分-整体"的层次结构。这种模式能够使客户端统一对待单个对象和组合对象&#xff0c;从而简化了客户端代码。 组合模式有透明组合…...

编程日记 2025/7/5 0:27:33

蓝桥杯模拟算法：蛇形方阵

P5731 【深基5.习6】蛇形方阵 - 洛谷 | 计算机科学教育新生态 我们只要定义两个方向向量数组&#xff0c;这种问题就可以迎刃而解了 比如我们是4的话&#xff0c;我们从左向右开始存&#xff0c;1&#xff0c;2&#xff0c;3&#xff0c;4 到5的时候y就大于4了就是越界了&…...

编程日记 2025/7/5 0:03:51

24_游戏启动逻辑梳理总结

首先这个项目从游戏根入口GameRoot.cs的初始化开始 分为 服务层初始化Svc.cs 与 业务系统层初始化Sys.cs 而服务层 分为 资源加载服务层ResSvc.cs 与 音乐播放服务层AudioSvc.cs 而在 资源加载服务层ResSvc.cs中 初始化了 名字的 配置文件 而音乐播放服务层AudioSvc.cs 暂时没…...

编程日记 2025/7/1 5:53:53

TikTok 推出了一款 IDE，用于快速构建 AI 应用

字节跳动（TikTok 的母公司）刚刚推出了一款名为 Trae 的新集成开发环境（IDE）。 Trae 基于 Visual Studio Code（VS Code）构建，继承了这个熟悉的平台，并加入了 AI 工具，帮助开发者更快、更轻松地构建应用——有时甚至无需编写任何代码。 如果你之前使用过 Cursor AI，T…...

编程日记 2025/7/1 19:03:56

如何运用python爬虫爬取百度贴吧动态加载的图片？

动态加载的图片通常是在页面加载后通过JavaScript异步请求获取的&#xff0c;而requests和BeautifulSoup只能获取页面的初始HTML内容&#xff0c;无法执行JavaScript代码。 要处理动态加载的图片&#xff0c;可以使用以下方法&#xff1a; 1. 使用Selenium Selenium是一个用…...

编程日记 2025/6/30 6:04:19

在Rust应用中访问.ini格式的配置文件

在Rust应用中访问.ini格式的配置文件&#xff0c;你可以使用第三方库&#xff0c;比如 ini 或 config. 下面是一个使用 ini 库的示例&#xff0c;该库允许你读取和解析.ini文件。 使用 ini 库 添加依赖 首先&#xff0c;你需要在你的 Cargo.toml 文件中添加 ini 库的依赖&am…...

编程日记 2025/6/30 8:09:52

Van-Nav：新年，将自己学习的项目地址统一整理搭建自己的私人导航站，供自己后续查阅使用，做技术的同学应该都有一个自己网站的梦想

嗨&#xff0c;大家好&#xff0c;我是小华同学&#xff0c;关注我们获得“最新、最全、最优质”开源项目和高效工作学习方法 Van-Nav是一个基于Vue.js开发的导航组件库&#xff0c;它提供了多种预设的样式和灵活的配置选项&#xff0c;使得开发者可以轻松地定制出符合项目需求…...

编程日记 2025/7/1 17:57:49

【某大厂一面】Map和Set区别

在 Java 中&#xff0c;Map 和 Set 都是集合框架中的重要接口&#xff0c;它们具有不同的特性和用途。虽然它们都用于存储一组元素&#xff0c;但它们之间有一些重要的区别。下面将详细介绍它们之间的差异。 1. Set 和 Map 的基本定义 Set 是一个集合接口&#xff0c;它用于存…...

编程日记 2025/7/1 23:37:27

Vue.js组件开发-使用Vue3如何实现上传word作为打印模版

使用Vue 3实现Word模板上传、解析和打印功能的完整解决方案&#xff1a; 一、实现步骤 安装依赖创建文件上传组件实现.docx文件解析创建打印预览组件实现打印功能样式优化 二、完整代码实现 1. 安装依赖 npm install mammoth axios2. 创建文件上传组件&#xff08;FileUploa…...

编程日记 2025/6/30 12:52:07

Consul持久化配置报错1067---consul_start

报错都是文件写的有问题或者格式问题&#xff0c;直接复制我的这个改改地址就行 先创建文本文件consul_start.txt--->再复制代码保存---->再把.txt改成.bat 持久化存储的地址在&#xff1a;mydata 注&#xff1a;D:\consul\consul_1.20.2_windows_386改成自己consul的…...

编程日记 2025/7/1 3:29:29

动态规划DP 最长上升子序列模型 总览

最长上升子序列模型 最长上升子序列 怪盗基德的滑翔伞...

编程日记 2025/7/3 13:38:14

如何解压7z文件？8种方法（Win/Mac/手机/网页端）

7z 文件是一种高效的压缩文件格式&#xff0c;由 7 - Zip 软件开发者所采用。它运用独特的压缩算法&#xff0c;能显著缩小文件体积&#xff0c;便于存储与传输各类数据&#xff0c;像软件安装包、大型资料集等。但要使用其中内容&#xff0c;就必须解压&#xff0c;因为处于压…...

编程日记 2025/6/29 2:25:26

2023年吉林省职业院校技能大赛网络系统管理样题-网络配置（华三代码）

目录 附录1：拓扑图 附录2：地址规划表 1.S1 2.S3 3.S4 4.S5 5.S7 6.S8 7.S9 8.R1 9.R2 10.R3 11.EG1 12.EG2 13.AC1 14.AC2 附录1：拓扑图 编号 型号...

编程日记 2025/7/1 16:12:54

Flutter使用Flavor实现切换环境和多渠道打包

在Android开发中通常我们使用flavor进行多渠道打包&#xff0c;flutter开发中同样有这种方式&#xff0c;不过需要在原生中配置 具体方案其实flutter官网个了相关示例&#xff08;https://docs.flutter.dev/deployment/flavors&#xff09;,我这里记录一下自己的操作 Android …...

编程日记 2025/7/2 10:42:49

【linux三剑客】grep练习题

题目 进入/lianxi目录&#xff0c;复制/etc/passwd到当前目录下&#xff0c;然后对passwd进行操作查找出当前passwd文件中以ftp或者mail开头的行&#xff0c;在屏幕上输出。查找出当前passwd文件中有没有以r、m、f开头的行&#xff0c;在屏幕上输出。查找出当前passwd文件中以…...

编程日记 2025/7/5 1:21:41

冬天适合养什么鱼？

各位鱼友们&#xff0c;冬天来了&#xff0c;是不是还在为养什么鱼而烦恼&#xff1f;别担心&#xff0c;今天就来给大家好好推荐一些适合冬天养的鱼&#xff0c;让你的水族箱在寒冷的冬天也能生机勃勃&#xff01; 一、金鱼&#xff1a;冬日里的“小暖男” 金鱼绝对是冬季养鱼…...

编程日记 2025/7/3 23:58:04

Effective C++ 规则43：学习处理模板化基类内的名称

1、背景 在 C 中&#xff0c;模板化基类为我们提供了强大的灵活性。然而&#xff0c;模板化基类的名称查找却经常会引发困惑&#xff0c;甚至导致编译错误。这是因为模板的名称查找规则与普通类不同。在普通类中&#xff0c;派生类可以直接访问基类的成员变量和成员函数&#…...

编程日记 2025/7/2 16:11:44

DeepSeek R1 linux云部署

云平台&#xff1a;AutoDL 模型加载工具&#xff1a;Ollama 参考&#xff1a;https://github.com/ollama/ollama/blob/main/docs/linux.md 下载Ollama 服务器上下载ollama比较慢&#xff0c;因此我使用浏览器先下载到本地电脑上。 https://ollama.com/download/ollama-linux…...

编程日记 2025/7/1 18:54:17

混合专家模型MoE的全面详解

什么是混合专家&#xff08;MoE&#xff09;&#xff1f; 混合专家&#xff08;MoE&#xff09;是一种利用多个不同的子模型&#xff08;或称为“专家”&#xff09;来提升LLM质量的技术。 MoE的两个主要组成部分是&#xff1a; 专家&#xff1a;每个前馈神经网络&#xff08…...

编程日记 2025/7/1 4:51:43

vue3相关知识点

title: vue_1 date: 2025-01-28 12:00:00 tags:- 前端 categories:- 前端vue3 Webpack ~ vite vue3是基于vite创建的 vite 更快一点 一些准备工作 准备后如图所示 插件 Main.ts // 引入createApp用于创建应用 import {createApp} from vue // 引入App根组件 import App f…...

编程日记 2025/6/30 6:05:32

【2025美赛D题】为更美好的城市绘制路线图建模｜建模过程+完整代码论文全解全析

你是否在寻找数学建模比赛的突破点&#xff1f;数学建模进阶思路&#xff01; 作为经验丰富的美赛O奖、国赛国一的数学建模团队&#xff0c;我们将为你带来本次数学建模竞赛的全面解析。这个解决方案包不仅包括完整的代码实现&#xff0c;还有详尽的建模过程和解析&#xff0c…...

编程日记 2025/7/4 5:05:26

games101-(5/6)

光栅化 投影完成之后&#xff0c;视图区域被确定在从[-1,1]的单位矩阵中&#xff0c;下一步就是光栅化 长宽比&#xff1a;ratio 垂直的可视角度&#xff1a;fild-of-view 可以看到的y 轴的范围&#xff0c;角度越小 越接近正交投影 屏幕坐标系 、 将多边形转化成像素 显示…...

编程日记 2025/7/3 7:36:56

UE5.3 C++ CDO的初步理解

一.UObject UObject是所有对象的基类&#xff0c;往上还有UObjectBaseUtility。 注释&#xff1a;所有虚幻引擎对象的基类。对象的类型由基于 UClass 类来定义。 这为创建和使用UObject的对象提供了 函数&#xff0c;并且提供了应在子类中重写的虚函数。 /** * The base cla…...

编程日记 2025/6/30 22:01:26

前端——js高级25.1.27

复习&#xff1a;对象 问题一&#xff1a; 多个数据的封装提 一个对象对应现实中的一个事物 问题二&#xff1a; 统一管理多个数据 问题三&#xff1a; 属性&#xff1a;组成&#xff1a;属性名属性值 &#xff08;属性名为字符串&#xff0c;属性值任意&#xff09; 方…...

编程日记 2025/7/1 15:57:14

Python 魔术方法

1. 什么是魔术方法 在 Python 中&#xff0c;魔术方法&#xff08;Magic Methods&#xff09;&#xff0c;又叫 特殊方法 或 双下方法&#xff0c;是以两个下划线&#xff08;__&#xff09;开头和结尾的方法。 这些方法为 Python 提供了对类和对象的特殊操作功能&#xff0c…...

编程日记 2025/6/29 20:10:40

websocket webworker教程及应用

WebSocket 和 Web Workers 是两种不同的 Web 技术&#xff0c;分别用于实现实时通信和后台线程处理。以下是它们的简要教程&#xff1a; WebSocket 教程 1. 什么是 WebSocket&#xff1f; WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。它允许服务器主动向客户端推…...

编程日记 2025/7/3 13:26:20

qwen2.5-vl：阿里开源超强多模态大模型（包含使用方法、微调方法介绍）

1.简介 在 Qwen2-VL 发布后的五个月里&#xff0c;众多开发者基于该视觉语言模型开发了新的模型&#xff0c;并向 Qwen 团队提供了极具价值的反馈。在此期间&#xff0c;Qwen 团队始终致力于打造更具实用性的视觉语言模型。今天&#xff0c;Qwen 家族的最新成员——Qwen2.5-VL…...

编程日记 2025/7/1 16:00:06

PaddleSeg 从配置文件和模型 URL 自动化运行预测任务

git clone https://github.com/PaddlePaddle/PaddleSeg.git# 在ipynb里面运行 cd PaddleSegimport sys sys.path.append(/home/aistudio/work/PaddleSeg)import os# 配置文件夹路径 folder_path "/home/aistudio/work/PaddleSeg/configs"# 遍历文件夹&#xff0c;寻…...

编程日记 2025/7/3 20:15:47

Java实战项目-基于 springboot 的校园选课小程序（附源码，部署，文档）

Java 基于 springboot 的校园选课小程序 博主介绍&#xff1a;✌程序员徐师兄、8年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战*✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&…...

编程日记 2025/7/1 4:42:23

网络工程师 （7）进程管理

一、进程相关的概念 &#xff08;一&#xff09;定义 进程&#xff08;Process&#xff09;是计算机中的程序关于某数据集合上的一次运行活动&#xff0c;是系统进行资源分配和调度的基本单位&#xff0c;也是操作系统结构的基础。进程是程序的一次执行实例&#xff0c;具有动…...

编程日记 2025/6/29 22:15:07

大屏 UI 设计风格的未来趋势

在科技飞速革新的时代&#xff0c;大屏设备的应用领域不断拓展&#xff0c;从城市的智能交通指挥中心&#xff0c;到商场的互动广告大屏&#xff0c;再到家庭的超大尺寸智能电视&#xff0c;大屏已然成为信息展示与交互的关键载体。大屏 UI 设计风格也随之不断演变&#xff0c;…...

编程日记 2025/7/1 20:20:25

Kmesh v1.0 正式发布

2025 年 1 月 23 日&#xff0c;Kmesh 团队正式发布了 Kmesh v1.0235。Kmesh 作为一款开源的服务网格解决方案&#xff0c;v1.0 版本在网络流量管理领域引入了多项重磅特性2。具体如下134&#xff1a; IPsec 加密通信&#xff1a;引入 IPsec 加密协议&#xff0c;将节点间流量加…...

编程日记 2025/7/2 16:35:25

低代码系统-产品架构案例介绍、轻流（九）

轻流低代码产品定位为零代码产品&#xff0c;试图通过搭建来降低企业成本&#xff0c;提升业务上线效率。 依旧是从下至上&#xff0c;从左至右的顺序 名词概述运维层底层系统运维层&#xff0c;例如上线、部署等基础服务体系内置的系统能力&#xff0c;发消息、组织和权限是必…...

编程日记 2025/7/2 5:07:50

深入理解动态规划(dp)--(提前要对dfs有了解)

前言&#xff1a;对于动态规划&#xff1a;该算法思维是在dfs基础上演化发展来的&#xff0c;所以我不想讲的是看到一个题怎样直接用动态规划来解决&#xff0c;而是说先用dfs搜索&#xff0c;一步步优化&#xff0c;这个过程叫做动态规划。&#xff08;该文章教你怎样一步步的…...

编程日记 2025/7/3 23:48:48

C++传送锚点的内存寻址：内存管理

文章目录 1.C/C内存分布回顾2.C内存管理2.1 内存申请2.2 operator new与operator delete函数2.3 定位new表达式 3.关于内存管理的常见知识点3.1 malloc/free和new/delete的区别3.2 内存泄漏 希望读者们多多三连支持小编会继续更新你们的鼓励就是我前进的动力&#xff01; 继C语…...

编程日记 2025/7/4 17:08:27

webAPI -DOM 相关知识点总结（非常细）

title: WebAPI语法 date: 2025-01-28 12:00:00 tags:- 前端 categories:- 前端WEB API 了解DOM的结构并掌握其基本的操作&#xff0c;体验 DOM 在开发中的作用 API简介 就是使用js来操作html和浏览器 什么是DOM? 就是一个文档对象模型&#xff0c;是用来呈现预计于任意htm…...

编程日记 2025/6/29 19:54:01

Deepseek的RL算法GRPO解读

在本文中&#xff0c;我们将深入探讨Deepseek采用的策略优化方法GRPO&#xff0c;并顺带介绍一些强化学习&#xff08;Reinforcement Learning, RL&#xff09;的基础知识&#xff0c;包括PPO等关键概念。 策略函数&#xff08;policy&#xff09; 在强化学习中&#xff0c; a…...

编程日记 2025/7/3 15:35:10

设计模式的艺术-策略模式

行为型模式的名称、定义、学习难度和使用频率如下表所示&#xff1a; 1.如何理解策略模式 在策略模式中&#xff0c;可以定义一些独立的类来封装不同的算法&#xff0c;每个类封装一种具体的算法。在这里&#xff0c;每个封装算法的类都可以称之为一种策略&#xff08;Strategy…...

编程日记 2025/7/2 10:45:21

MyBatis 写法

MyBatis 高效使用技巧 常见 MyBatis 使用技巧&#xff0c;这些技巧有助于简化数据库操作&#xff0c;提高开发效率&#xff0c;并增强系统的性能。 1. 动态 SQL 动态 SQL 让开发者能够依据参数灵活地构建 SQL 语句&#xff0c;避免了手动拼接字符串带来的复杂性和错误风险。…...

编程日记 2025/6/29 21:42:07

Git图形化工具【lazygit】

简要介绍一下偶然发现的Git图形化工具——「lazygit」 概述 Lazygit 是一个用 Go 语言编写的 Git 命令行界面&#xff08;TUI&#xff09;工具&#xff0c;它让 Git 操作变得更加直观和高效。 Github地址&#xff1a;https://github.com/jesseduffield/lazygit 主要特点 主要…...

编程日记 2025/7/3 6:54:39

K8s运维管理平台 - xkube体验：功能较多

目录 简介Lic安装1、需要手动安装MySQL&#xff0c;**建库**2、启动命令3、[ERROR] GetNodeMetric Fail:the server is currently unable to handle the request (get nodes.metrics.k8s.io qfusion-1) 使用总结优点优化 补充1&#xff1a;layui、layuimini和beego的详细介绍1.…...

编程日记 2025/6/29 10:37:08

5.3.1 软件设计的基本任务

文章目录 软件设计解决的问题概要设计基本任务详细设计基本任务 软件设计解决的问题 需求分析解决“做什么”的问题&#xff0c;软件设计解决“如何做”的问题。软件设计分为概要设计、详细设计两块。概要设计是设计软件和数据的总体框架&#xff0c;比详细设计的颗粒度更大。详…...

编程日记 2025/7/2 23:28:33

Go学习：字符、字符串需注意的点

Go语言与C/C语言编程有很多相似之处&#xff0c;但是Go语言中在声明一个字符时&#xff0c;数据类型与其他语言声明一个字符数据时有一点不同之处。通常&#xff0c;字符的数据类型为 char&#xff0c;例如 &#xff1a;声明一个字符 (字符名称为 ch) 的语句格式为 char ch&am…...

编程日记 2025/7/2 15:20:05

LabVIEW无线齿轮监测系统

本案例介绍了基于LabVIEW的无线齿轮监测系统设计。该系统利用LabVIEW编程语言和改进的天牛须算法优化支持向量机&#xff0c;实现了无线齿轮故障监测。通过LabVIEW软件和相关硬件&#xff0c;可以实现对齿轮箱振动信号的采集、传输和故障识别&#xff0c;集远程采集、数据库存储…...

编程日记 2025/7/1 4:15:16

基于SpringBoot的租房管理系统（含论文）

基于SpringBoot的租房管理系统是一个集订单管理、房源信息管理、屋主申诉处理、用户反馈等多项功能于一体的系统。该系统通过SpringBoot框架开发&#xff0c;拥有完善的管理员后台、屋主管理模块、用户功能模块等&#xff0c;适用于房地产租赁平台或中介公司进行日常管理与运营…...

编程日记 2025/7/1 5:24:53

剑指 Offer II 008. 和大于等于 target 的最短子数组

comments: true edit_url: https://github.com/doocs/leetcode/edit/main/lcof2/%E5%89%91%E6%8C%87%20Offer%20II%20008.%20%E5%92%8C%E5%A4%A7%E4%BA%8E%E7%AD%89%E4%BA%8E%20target%20%E7%9A%84%E6%9C%80%E7%9F%AD%E5%AD%90%E6%95%B0%E7%BB%84/README.md 剑指 Offer II 008.…...

编程日记 2025/7/2 23:18:11

【微服务与分布式实践】探索 Eureka

服务注册中心 心跳检测机制&#xff1a;剔除失效服务自我保护机制 统计心跳失败的比例在15分钟之内是否低于85%&#xff0c;如果出现低于的情况&#xff0c;Eureka Server会将当前的实例注册信息保护起来&#xff0c;让这些实例不会过期。当节点在短时间内丢失过多的心跳时&am…...

编程日记 2025/7/1 23:01:29

关于opencv环境搭建问题：由于找不到opencv_worldXXX.dll,无法执行代码，重新安装程序可能会解决此问题

方法一&#xff1a;利用复制黏贴方法 打开opencv文件夹目录找到\opencv\build\x64\vc15\bin 复制该目录下所有文件&#xff0c;找到C:\Windows\System32文件夹&#xff08;注意一定是C盘&#xff09;黏贴至该文件夹重新打开VS。 方法二&#xff1a;直接配置环境 打开opencv文…...

编程日记 2025/7/2 4:20:17