Vue3为什么会推出组合式API

前言

大学前端入门学的vue2,工作了又用的React,现在想学习一下Vue3,开篇就介绍了组合式API,这和我认知里的vue2的选项式API区别还是蛮大的。本篇文章简单介绍一下组合式API。

什么是组合式API

Vue 3引入了一种新的 API,称为“组合式 API”(Composition API)。与以前的选项式 API 不同,组合式 API 允许开发者将代码组织成逻辑相关的功能块,而不是按照选项的生命周期钩子来组织。这使得代码更加灵活、可维护,并且更容易重用。

组合式 API 的核心特性是 setup 函数,它是在组件实例创建之前被调用的。setup 函数返回一个对象,该对象中包含了在组件中使用的响应式数据、计算属性、方法等。

举个简单的例子来看看这么用:

<template><div><p>{{ message }}</p><button @click="reverseMessage">Reverse Message</button></div>
</template><script>
import { ref } from 'vue';export default {setup() {// 使用 ref 创建响应式数据const message = ref('Hello, Vue!');// 定义一个方法const reverseMessage = () => {message.value = message.value.split('').reverse().join('');};// 返回组件实例中需要用到的数据和方法return {message,reverseMessage};}
};
</script>

在这个例子中,setup 函数中使用了 ref 函数创建了一个名为 message 的响应式数据,并定义了一个 reverseMessage 方法。在模板中,通过 {{ message }} 显示了这个响应式数据,并通过 @click 绑定了按钮的点击事件。

组合式 API 还提供了其他一些函数,例如 reactive 用于创建响应式对象,computed 用于创建计算属性,以及一些生命周期钩子函数,如 onMountedonUpdatedonUnmounted 等。通过这些函数,你可以更加灵活地组织和管理你的组件逻辑。

组合式 API 的引入让 Vue 更适用于大型应用和更复杂的场景,同时保持了简单性和可读性。

什么又是选项式API

选项式 API(Options API)是 Vue 2 中的主要 API,它使用对象来定义组件的选项。选项式API在简单的应用中直观和易用,但当应用逻辑变得复杂时,组件可能会包含大量的选项,导致组件定义变得冗长且难以维护。

在 Vue 2 中,一个组件的定义通常包括以下选项:

  • data 选项用于定义组件的数据。
  • props 参数, 用于接收父组件传递的数据。
  • methods 选项用于定义组件的方法。
  • watch 监听属性。
  • computed 用于定义计算属性。计算属性是基于响应式数据计算而来的属性,具有缓存机制,只在相关依赖发生变化时才重新计算。
  • created、mounted、updated、destroyed: 生命周期钩子,用于在组件的不同生命周期阶段执行相应的操作。
    还有其他选项,这里就不一一列举了,这些选项将一起形成一个对象,作为 Vue 组件的定义。
export default {data() {return {message: 'Hello, Vue!'};},watch: {'someData': function(newVal, oldVal) {// 处理变化}
},
computed: {fullName() {return this.firstName + ' ' + this.lastName;}
},methods: {reverseMessage() {this.message = this.message.split('').reverse().join('');}},template: `<div><p>{{ message }}</p><button @click="reverseMessage">Reverse Message</button></div>`
};

组合式API的优势

组合式 API 相对于选项式 API 具有一些优点,尤其在处理复杂组件和大型应用时。

  1. 更灵活的组织结构: 组合式 API 允许你通过逻辑相关的功能块来组织代码,而不是按照生命周期钩子和选项的方式来组织。这使得代码更具可读性和可维护性。

  2. 更好的代码复用: 组合式 API 支持将逻辑提取到可复用的函数中,使得这些逻辑可以在不同组件之间共享。这有助于减少重复代码,提高代码的可维护性。

  3. 更好的 TypeScript 支持: 组合式 API 在 TypeScript 中的支持更好,因为它提供了更明确的类型推断和更容易推导的类型。这有助于减少潜在的类型错误,并提高代码的稳定性。

  4. 更好的响应性处理: 组合式 API 中的响应式函数(如 refreactive)使得数据的响应式处理更加直观。通过 refreactive,你可以明确地声明哪些数据是响应式的,而不需要依赖于 Vue 2 中的 data 选项。

  5. 更清晰的生命周期: 组合式 API 中的生命周期钩子是通过函数来定义的,而不是作为选项来定义的。这使得生命周期钩子的顺序更加清晰,易于理解。

  6. 更好的逻辑复杂性处理: 对于复杂的业务逻辑,组合式 API 允许将逻辑拆分为小的功能块,每个功能块都有其自己的状态和方法。这降低了理解和维护复杂组件的难度。

相比React Hooks

Vue 3 的组合式 API 与 React 的 Hooks 在某些概念上有一些相似之处,因为它们都是为了解决在函数式组件中复用逻辑的问题。然而,它们在具体实现和一些概念上有一些区别。

相似之处

  1. 函数式组件: 组合式 API 和 React Hooks 都是为了函数式组件而设计的。它们让你在不使用类组件的情况下,能够在组件之间共享和复用逻辑。

  2. 逻辑复用: 两者的目标都是使逻辑能够在组件之间进行复用,而不必依赖于继承的方式。

区别

组合式 API 和 React Hooks 都是为了解决在函数式组件中复用逻辑的问题,但它们在具体实现和使用方式上有一些不同。熟悉其中一个并不会让你自动熟悉另一个,但它们共同推动了前端开发中对于更灵活和可维护组件的需求。

  1. API 设计:

    • 组合式 API: Vue 3 的组合式 API 使用 setup 函数,并通过返回一个对象来暴露组件内部的状态和方法。
    • React Hooks: React 的 Hooks 使用一系列以 “use” 开头的函数(如 useStateuseEffect 等),通过这些函数来管理状态和副作用。
  2. 响应式系统:

    • 组合式 API: Vue 3 的组合式 API 使用 refreactive 等函数来创建响应式数据。
    • React Hooks: React 使用 useState 来管理状态,但它的响应式系统不同于 Vue,是基于不可变性的原则。
  3. 生命周期:

    • 组合式 API: Vue 3 中使用 onMountedonUpdatedonUnmounted 等函数来处理生命周期事件。
    • React Hooks: React 使用 useEffect 来处理副作用,而不像 Vue 3 中的生命周期钩子那样区分不同的阶段。
  4. 上下文传递:

    • 组合式 API: Vue 3 中可以使用 provideinject 在组件树中传递数据。
    • React Hooks: React 使用 Context 来实现组件树中的数据传递。
  5. TypeScript 支持:

    • 组合式 API: 组合式 API 在 TypeScript 中的支持相对较好,类型推断更直观。
    • React Hooks: React Hooks 也能在 TypeScript 中使用,但需要一些额外的类型声明。

对于使用那种,根据项目和团队喜好决定。官网也说了选项式API不会被放弃,选项式 API 也是 Vue 不可分割的一部分,也有很多开发者喜欢它。我们也意识到组合式 API 更适用于大型的项目,而对于中小型项目来说选项式 API 仍然是一个不错的选择。

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

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

相关文章

计算函数的变分是什么意思

计算函数的变分是指在变分法中寻找函数的极值。变分法是一种数学方法&#xff0c;用于求解函数或泛函的极值问题。在物理学、工程学和数学的最优化问题中&#xff0c;变分法是寻找函数使得某个泛函&#xff08;函数的函数&#xff09;达到极值的过程。 在数学上&#xff0c;泛…

vue+less+style-resources-loader 配置全局颜色变量

全局统一样式后&#xff0c;可配置vue.config.js实现全局颜色变量&#xff0c;方便在编写时使用统一风格的色彩 一、新建global.less 二、下载安装style-resources-loader npm i style-resources-loader --save-dev三、在vue.config.js中进行配置 module.exports {pluginOpt…

Python Locals:引领代码风潮,变量管理新尝试

更多资料获取 &#x1f4da; 个人网站&#xff1a;ipengtao.com 在Python中&#xff0c;locals()函数是一个强大的工具&#xff0c;它使程序员能够访问和操作当前作用域内的局部变量。本文将深入探讨locals()函数的功能、应用和重要性。 动态变量赋值和操作 locals()函数让我…

程序员の养生之道

作为一个程序员&#xff0c;养生确实很重要&#xff0c;因为长时间的工作可能导致身体和心理的不适。以下是一些建议&#xff0c;可以帮助程序员保持健康和延寿&#xff1a; 合理的作息时间&#xff1a; 尽量保持规律的作息时间&#xff0c;保证充足的睡眠。规律的作息可以帮助…

算法通关村第七关—理解二叉树的遍历(白银)

深入理解前中后序遍历 给定一棵二叉树 二叉树前序遍历 public void preorder(TreeNode root,List<Integer>res){if&#xff08;rootnull){return;}res.add(root.val);preorder(root.left,res);preorder(root.right,res); }递归的过程如下图所示 从图中可以看到&#x…

JavaScript编程基础 – For循环

JavaScript编程基础 – For循环 JavaScript Programming Essentials – For Loop By JacksonML 循环可以多次执行代码块&#xff0c;而不用反复重写相同的语句。这无疑对提升代码质量、减少错误大有脾益。本文将简要介绍for循环的几种案例&#xff0c;希望对读者有所帮助。 …

Ubuntu 安装adb

安装adb驱动到ubuntu系统下&#xff1a; 1、更新一遍软件源&#xff1a; sudo apt-get update 2、安装adb工具&#xff1a; sudo apt-get install android-tools-adb 3、检查安装是否成功&#xff1a; adb version 4、列出当前的adb设备 sudo adb devices

【Python篇】文件概述 | 读文件 | 写文件 | 追加文件操作

文章目录 &#x1f339;什么是文件&#x1f6f8;读 操作 — r⭐打开文件⭐读取文件&#x1f388;循环读取&#x1f388;读取文件中某一个词语的个数 ⭐关闭文件 &#x1f33a;小结&#x1f6f8;写 操作 — w&#x1f6f8;追加 操作 — a &#x1f339;什么是文件 文件是计算机…

『亚马逊云科技产品测评』活动征文|基于亚马逊云EC2搭建OA系统

授权声明&#xff1a;本篇文章授权活动官方亚马逊云科技文章转发、改写权&#xff0c;包括不限于在 Developer Centre, 知乎&#xff0c;自媒体平台&#xff0c;第三方开发者媒体等亚马逊云科技官方渠道 亚马逊EC2云服务器&#xff08;Elastic Compute Cloud&#xff09;是亚马…

2023年AI报告:首个投研GPTs测评重塑AI竞争格局

今天分享的是AI系列深度研究报告&#xff1a;《2023年AI报告&#xff1a;首个投研GPTs测评重塑AI竞争格局》。 &#xff08;报告出品方&#xff1a;国盛证券&#xff09; 报告共计&#xff1a;10页 1.一键创建 GPTs 助力行业研究 GPTs 目前仅对企业用户和 ChatGPT Plus 会员…

右值引用和移动语句(C++11)

左值引用和右值引用 回顾引用 我们之前就了解到了左值引用&#xff0c;首先我们要了解引用在编译器底层其实就是指针。具体来说&#xff0c;当声明引用时&#xff0c;编译器会在底层生成一个指针来表示引用&#xff0c;但在代码编写和使用时&#xff0c;我们可以像使用变量类…

HarmonyOS系统和Android系统有什么区别?

鸿蒙系统和安卓系统有如下几点区别&#xff1a;点击这里查看获取鸿蒙系统资料方式 (qq.com) 一、开发商不同&#xff1a; 鸿蒙OS&#xff1a;由中国华为公司主导开发的系统&#xff0c;2019年首次发布&#xff0c;现在已经更新至鸿蒙OS4.0。 安卓系统&#xff1a;是由安迪鲁宾…

visual Studio MFC 平台实现图像增强中的线性变换(负变换)和非线性变换(对数与幂律)

MFC 实现数字图像处理中的图像增强操作 本文使用visual Studio MFC 平台实现图像增强中典型的三种图像增强的方法中的两大类&#xff0c;包括线性变换–>负变换&#xff0c;非线性变换–>对数变换和幂律变换&#xff1b;其中第三大类分段式变换可以参考MFC实现图像增强–…

Android Termux 安装Kali Linux 或 kali Nethunter史诗级详细教程

Android Termux 安装Kali Linux 或 kali Nethunter史诗级详细教程 一、Termux配置1、下载安装2、配置存储和换源3、基本工具安装 二、Kali Linux安装1、下载安装脚本2、更换apt源3、图形化安装 三、Kali Nethunter安装1、下载安装脚本2、更换apt源3、图形化连接 四、报错汇总1、…

2023年5月电子学会青少年软件编程 Python编程等级考试一级真题解析(判断题)

2023年5月Python编程等级考试一级真题解析 判断题(共10题,每题2分,共20分) 26、在编写较长的Python程序时,所有代码都不需要缩进,Python会自动识别代码之间的关系 答案:错 考点分析:考查python代码书写格式规范,python编写较长的程序时,需要明确严格的缩进,不然有…

【ArcGIS Pro微课1000例】0044:深度学习--面部模糊(马赛克)

本文讲解ArcGIS Pro中通过深度学习工具实现人脸面部模糊,起到马赛克的作用。 文章目录 一、效果对比二、工具介绍三、案例实现一、效果对比 原始图片: 深度学习后的模糊照片: 二、工具介绍 本工具为ArcGIS Pro工具箱中的深度学习工具中的:使用深度学习分类像素,如下所示…

vue3中自定义hook函数

使用Vue3的组合API封装的可复用的功能函数 自定义hook的作用类似于vue2中的mixin技术 自定义Hook的优势: 很清楚复用功能代码的来源, 更清楚易懂 案例: 收集用户鼠标点击的页面坐标 hooks/useMousePosition.ts文件代码&#xff1a; import { ref, onMounted, onUnmounted …

Java LeetCode篇-深入了解关于栈的经典解法(栈实现:中缀表达式转后缀)

&#x1f525;博客主页&#xff1a; 【小扳_-CSDN博客】 ❤感谢大家点赞&#x1f44d;收藏⭐评论✍ 文章目录 1.0 中缀表达式转后缀说明 1.1 实现中缀表达式转后缀思路 2.0 逆波兰表达式求值 2.1 实现逆波兰表达式求值思路 3.0 有效的括号 3.1 实现有效的括号思路 4.0 栈的压…

法学毕业生个人简历16篇

想要从众多法学毕业求职者中脱颖而出&#xff0c;找到心仪的相关工作&#xff1f;可以参考这16篇精选的法学专业应聘简历案例&#xff0c;无论是应届比预算还是有工作经验&#xff0c;都能从中汲取灵感&#xff0c;提升简历质量。希望对大家有所帮助。 法学毕业生简历模板下载…

RPG项目01_脚本代码

基于“RPG项目01_场景及人物动画管理器”&#xff0c;我们创建一个XML文档 在资源文件夹下创建一个文件夹&#xff0c; 命名为Xml 将Xnl文档拖拽至文件夹中&#xff0c; 再在文件夹的Manager下新建脚本LoadManager 写代码&#xff1a; using System.Collections; using System…