Vue 3 中的 Composition API 详解

Vue.js,作为前端领域流行的框架之一,以其响应式数据绑定和组件化开发赢得了广大开发者的喜爱。随着前端技术的不断发展和项目复杂度的增加,Vue 团队推出了 Vue 3,并引入了 Composition API,以更好地满足复杂应用的需求。

一、Composition API 是什么?

Composition API 是 Vue 3 中新增的一组 API,它允许开发者使用函数式编程的方式来组织和复用组件逻辑。与 Vue 2 中的 Options API(如 datamethodscomputed 等选项)不同,Composition API 提供了一种更加灵活和可组合的方式来编写组件逻辑。

二、为什么需要 Composition API?

  1. 更好的代码组织:随着组件功能的增加,Options API 可能会导致代码难以维护和理解。Composition API 通过将逻辑拆分为多个可复用的函数,提高了代码的可读性和可维护性。

  2. 逻辑复用:在 Options API 中,复用逻辑通常需要通过 mixins 或高阶组件实现,但这些方式可能导致命名冲突和关系不清晰。Composition API 中的函数可以像普通 JavaScript 函数一样被复用,无需担心命名冲突。

  3. 更好的 TypeScript 支持:Vue 3 与 TypeScript 的集成更加紧密,而 Composition API 的函数式编程风格更适合 TypeScript 的类型推断和静态检查。

三、Composition API 的核心概念

  1. reactive 和 ref:这两个函数用于创建响应式数据。reactive 用于创建响应式对象,而 ref 用于创建响应式引用。它们都是 Vue 3 的响应式系统的核心。

    • reactive:返回一个响应式代理对象,该对象在被访问或修改时会触发相应的依赖更新。
    • ref:返回一个响应式引用对象,其内部值可以通过 .value 属性访问或修改。
  2. computed:用于创建计算属性。计算属性是基于响应式数据派生出的新数据,当依赖的数据变化时,计算属性会自动更新。

  3. watch 和 watchEffect:用于侦听响应式数据的变化,并在数据变化时执行相应的回调函数。

    • watch:需要显式指定侦听的数据源和回调函数,支持立即执行、深度侦听等选项。
    • watchEffect:自动侦听回调函数中使用的响应式数据,无需显式指定数据源。当回调函数中使用的数据变化时,watchEffect 会自动重新执行回调函数。
  4. setup 函数:Composition API 的入口函数,用于替代 Vue 2 中的 datamethodscomputed 等选项。在 setup 函数中,开发者可以定义和导出组件所需的响应式数据、计算属性、方法等。

四、使用 Composition API 编写组件

使用 Composition API 编写组件时,通常需要在组件的 setup 函数中定义和导出所需的响应式数据、计算属性和方法等。然后,在组件的模板中可以直接使用这些导出的值和方法。

以下是一个使用 Composition API 编写的简单 Vue 3 组件示例:

 

vue复制代码

<template>
<div>
<p>{{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const count = ref(0); // 定义响应式引用 count,初始值为 0
const increment = () => { // 定义方法 increment,用于增加 count 的值
count.value++; // 修改响应式引用的值时,需要使用 .value 属性
};
return { // 导出 count 和 increment,供模板中使用
count,
increment
};
}
};
</script>

五、总结与展望

Composition API 为 Vue 3 带来了更加灵活和可组合的代码组织方式,使得开发者能够更好地应对复杂应用的挑战。同时,Composition API 也为 Vue 与 TypeScript 的集成提供了更好的支持,有助于提升代码的类型安全和可维护性。随着 Vue 3 的不断发展和完善,相信 Composition API 将在前端开发中发挥越来越重要的作用。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/719742.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

深度伪造,让网络钓鱼更加难以辨别

网络钓鱼一直是安全领域的一个突出话题&#xff0c;尽管这类诈骗形式已经存在了几十年&#xff0c;依旧是欺诈攻击或渗透组织的最有效方法之一。诈骗分子基于社会工程原理&#xff0c;通过邮件、网站以及电话、短信和社交媒体&#xff0c;利用人性&#xff08;如冲动、不满、好…

嵌入式驱动学习第二周——Linux内核打印

前言 这篇博客来聊一聊Linux内核打印。 嵌入式驱动学习专栏将详细记录博主学习驱动的详细过程&#xff0c;未来预计四个月将高强度更新本专栏&#xff0c;喜欢的可以关注本博主并订阅本专栏&#xff0c;一起讨论一起学习。现在关注就是老粉啦&#xff01; 目录 前言1. dmesg指令…

react diff

react diff算法为降低算法复杂度提出了三大策略&#xff1a; 1.只进行同级比较 2.节点类型比较&#xff0c;不同元素生成不同的fiber树 3.key作为元素的唯一标识 diff算法流程 diff算法需要进行两轮遍历&#xff1a; 第一轮遍历更新的节点。 第二轮遍历没更新的节点。 第一轮…

【LeetCode:225. 用队列实现栈 + 栈 | 队列】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…

水牛社软件是真的吗?

软件是真的&#xff0c;不过毕竟是为了赚钱或者获取资源而买的&#xff0c;所以大部分只关心能赚多少钱吧 说实话&#xff0c;我用了2年了&#xff0c;一些独立的项目还有群&#xff0c;有一月挣几千上万的&#xff0c;有一月赚几百的 软件是一个集合体&#xff0c;不是像很多…

【leetcode刷题之路】面试经典150题(5)——二叉树+二叉树层次遍历+二叉搜索树

文章目录 9 二叉树9.1 【递归】二叉树的最大深度9.2 【递归】相同的树9.3 【递归】翻转二叉树9.4 【递归】对称二叉树9.5 【递归】从前序与中序遍历序列构造二叉树9.6 【递归】从中序与后序遍历序列构造二叉树9.7 【BFS】填充每个节点的下一个右侧节点指针 II9.8 【递归】二叉树…

代码随想录第二十七天 455.分发饼干 376.摆动序列 53.最大子序和 122.买卖股票的最佳时机II

LeetCode 455 分发饼干 题目描述 假设你是一位很棒的家长&#xff0c;想要给你的孩子们一些小饼干。但是&#xff0c;每个孩子最多只能给一块饼干。 对每个孩子 i&#xff0c;都有一个胃口值 g[i]&#xff0c;这是能让孩子们满足胃口的饼干的最小尺寸&#xff1b;并且每块饼…

2024全国护网行动HW行动招聘/收人!!!

2024全国护网行动HW行动招聘 溯蓉信创开始收人啦&#xff01;&#xff01;&#xff01;现在开始收录2024HW简历&#xff0c;感兴趣的小伙伴扫码二维码添加微信 我们签约后&#xff0c;入场即预付款3k&#xff0c;签约后我们会在HW之前对我们的人员进行HW培训&#xff0c;保证上…

Three.js--》探寻Cannon.js构建震撼的3D物理交互体验(一)

我们用three.js可以绘制出各种酷炫的画面&#xff0c;但是当我们想要一个更加真实的物理效果的话&#xff0c;这个时候我们就需要一个物理的库&#xff0c;接下来我们就讲解一下今天要学习的canon&#xff0c;它可以给我们提供一个更加真实的物理效果&#xff0c;像物体的张力、…

YOLOv8姿态估计实战:训练自己的数据集

课程链接&#xff1a;https://edu.csdn.net/course/detail/39355 YOLOv8 基于先前 YOLO 版本的成功&#xff0c;引入了新功能和改进&#xff0c;进一步提升性能和灵活性。YOLOv8 同时支持目标检测和姿态估计任务。 本课程以熊猫姿态估计为例&#xff0c;将手把手地教大家使用C…

Mysql实战(2)之MySQL执行流程

-- 查看mysql当前有多少连接 show global status like Thread%; /* Threads_cached&#xff1a;缓存中的线程连接数 Threads_connected&#xff1a;当前打开的连接数 Threads_created&#xff1a;为处理连接创建的线程数 Threads_running&#xff1a;非睡眠状态的连接数&…

windows部署mariadb-11.3

因为需要用到数据库来处理一些东西,所以决定在windows上安装一下MariaDB. 随着版本升级,安装已经不是那么复杂了.对应的.其实网上一大堆的检索结果,很多并不可用. 由于是开发环境,这里一切从简了. 下载安装包.并解压进入bin目录,使用mysql_install_db.exe程序来进行安装.执行 m…

MSCKF5讲:后端代码分析

MSCKF5讲&#xff1a;后端代码分析 文章目录 MSCKF5讲&#xff1a;后端代码分析1 初始化initialize()1.1 加载参数1.2 初始化IMU连续噪声协方差矩阵1.3 卡方检验1.4 接收与订阅话题createRosIO() 2 IMU静止初始化3 重置resetCallback()4 featureCallback4.1 IMU初始化判断4.2 I…

【文末送书】智能计算:原理与实践

欢迎关注博主 Mindtechnist 或加入【智能科技社区】一起学习和分享Linux、C、C、Python、Matlab&#xff0c;机器人运动控制、多机器人协作&#xff0c;智能优化算法&#xff0c;滤波估计、多传感器信息融合&#xff0c;机器学习&#xff0c;人工智能等相关领域的知识和技术。关…

Linux系统运维脚本:一键添加防火墙规则(开启服务和网络端口)

目 录 一、要求 二、解决方案 &#xff08;一&#xff09;解决思路 &#xff08;二&#xff09;方案 三、脚本程序实现 &#xff08;一&#xff09;脚本代码和解释 1、脚本代码 2、代码解释 &#xff08;二&#xff09;脚本验证 1、脚本编辑 2、给予执行权限…

NumPy数据处理详解的笔记2

NumPy数据处理详解的笔记2 第1章NumPy基础 NumPy是用于处理多维数组的数值运算库&#xff0c;不仅可用于 机器学习&#xff0c;还可以用于图像处理&#xff0c;语言处理等任务。 1.2 多维数据结构ndarray的基础 在学习NumPy的过程中&#xff0c;只要理解了ndarray的相关知识…

java 关于 Object 类中的 wait 和 notify 方法。(生产者和消费者模式!)

4、关于 Object 类中的 wait 和 notify 方法。&#xff08;生产者和消费者模式&#xff01;&#xff09; 第一&#xff1a;wait 和 notify 方法不是线程对象的方法&#xff0c;是 java 中任何一个 java 对象都有的方法&#xff0c;因为这两个方法是 Object 类中自带的。 wait 方…

基于YOLOv8/YOLOv7/YOLOv6/YOLOv5的停车位检测系统(Python+PySide6界面+训练代码)

摘要&#xff1a;开发停车位检测系统对于优化停车资源管理和提升用户体验至关重要。本篇博客详细介绍了如何利用深度学习构建一个停车位检测系统&#xff0c;并提供了完整的实现代码。该系统基于强大的YOLOv8算法&#xff0c;并结合了YOLOv7、YOLOv6、YOLOv5的性能对比&#xf…

HarmonyOS端云体化开发—创建端云一体化开发工程

云开发工程模板 DevEco Studio目前提供了两种云开发工程模板&#xff1a;通用云开发模板和商城模板。您可根据工程向导轻松创建端云一体化开发工程&#xff0c;并自动生成对应的代码和资源模板。在创建端云一体化开发工程前&#xff0c;请提前了解云开发工程模板的相关信息。 …

前端学习之HTML(第一天)

什么是HTML HTML是一种用来描述网页的一种语言&#xff0c;HTML不是一种编程语言&#xff0c;而是一种标记语言。 HTML标签 HTML 标签是由尖括号包围的关键词&#xff0c;比如 <html> HTML 标签通常是成对出现的&#xff0c;比如 <b> 和 </b> 标签对中的…