【Vue3】Hooks:一种全新的组件逻辑组织方式

💗💗💗欢迎来到我的博客,你将找到有关如何使用技术解决问题的文章,也会找到某个技术的学习路线。无论你是何种职业,我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章,也欢迎在文章下方留下你的评论和反馈。我期待着与你分享知识、互相学习和建立一个积极的社区。谢谢你的光临,让我们一起踏上这个知识之旅!
请添加图片描述

文章目录

  • 🍋回顾
  • 🍋什么是Hooks?
  • 🍋使用hooks
  • 🍋Hooks的优点
  • 🍋总结

🍋回顾

老样子,我们准备好起始的代码数据

<template><div class="person"><h2>求和:{{ sum }}</h2><button @click="sumAdd">+1</button>
</div></template><script lang="ts" setup name="Person11">import {ref} from 'vue'let sum = ref(0)function sumAdd(){sum.value+=1}</script><style scoped>.person {background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}button {margin: 0 5px;}
</style>

接下来我们安装一下axios

npm i axios

在这里插入图片描述

Axios 是一个基于Promise 的HTTP 库,它可以用在浏览器端和 node.js 中。Axios 的主要功能是向服务器发送AJAX 请求 以进行数据交换,它是目前前端开发中非常流行的异步通信框架。它是对 AJAX 的封装,通过发送异步请求来获取数据。

接下来我们导入一下

import axios from 'axios'

接下来我们想要通过一个可以随机生成狗的api去完成这个案例,通过点击button去生成不同的狗

<template><div class="person"><h2>求和:{{ sum }}</h2><button @click="sumAdd">+1</button><hr><img v-for="(dog,index) in dogList" :src="dog" :key="index"><br><button @click="getDog">再来一只狗</button>
</div></template><script lang="ts" setup name="Person11">import {ref,reactive} from 'vue'import axios from 'axios'let sum = ref(0)let dogList = reactive(['https://images.dog.ceo/breeds/pembroke/n02113023_4373.jpg'])function sumAdd(){sum.value+=1}async function getDog(){let result = await axios.get('https://dog.ceo/api/breed/pembroke/images/random')console.log(result.data.message)}</script>
<style scoped>.person {background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}button {margin: 0 5px;}
</style>

接下来我们稍加修改
在这里插入图片描述
最终的页面呈现就是没点击一次button都会生成一只狗
在这里插入图片描述
我们也可以加个异常

try{let result = await axios.get('https://dog.ceo/api/breed/pembroke/images/random')dogList.push(result.data.message)}catch(error){alert(error)}

当然这样过于麻烦,感兴趣的小伙伴可以使用拦截器

🍋什么是Hooks?

在Vue 3中,Hooks是函数,它们返回可以在组件的setup()函数内部使用的对象。这些对象包含了组件的逻辑,如状态、方法等。通过使用Hooks,我们可以将组件的逻辑拆分成更小的、可复用的函数,这有助于我们更好地组织代码,提高代码的可读性和可维护性

🍋使用hooks

hooks可以将我们的数据和方法放在一块,避免了数据和方法分家的情况
接下来我们创建一个hooks文件夹,同时创建两个.ts文件
在这里插入图片描述
接下来我们在useDog中编写代码,别忘了最后要return

import {reactive,onMounted} from 'vue'
import axios from 'axios'export default function (){let dogList = reactive(['https://images.dog.ceo/breeds/pembroke/n02113023_4373.jpg'])async function getDog(){try {let result = await axios.get('https://dog.ceo/api/breed/pembroke/images/random')dogList.push(result.data.message)} catch (error) {alert(error)}}// 向外部提供东西return {dogList,getDog}
}

同理useSum

import { ref ,onMounted} from 'vue'
export default function () {let sum = ref(0)function add() {sum.value += 1}// 给外部提供东西return {sum,add}
}

接下来我们只需要调用即可

const {sum,add} = usesum()const {dogList,getDog} = usedog()

另外hooks里面也可以加钩子

  onMounted(()=>{add()})onMounted(()=>{getDog()})

正是因为有hooks组合式APi才发挥出了它的真正作用

🍋Hooks的优点

  • 代码复用:通过将逻辑封装在Hooks中,我们可以轻松地在多个组件之间复用这些逻辑。
  • 逻辑组织:Hooks可以帮助我们更好地组织代码,使得每个函数都有明确的职责,这有助于提高代码的可读性和可维护性。
  • 逻辑共享:在大型项目中,我们可以将常用的逻辑封装在Hooks中,然后在需要的组件中引入这些Hooks,这使得我们可以轻松地共享逻辑,而无需在每个组件中重复编写相同的代码。

🍋总结

Vue 3中的Composition API和Hooks为我们提供了一种全新的方式来组织和共享组件逻辑。通过使用Hooks,我们可以更好地组织代码,提高代码的可读性和可维护性,同时也可以轻松地复用和共享逻辑。尽管Hooks在Vue 3中是一个相对较新的概念,但我相信它将在未来的Vue开发中发挥越来越重要的作用,这也恰恰是Vue3组合风格的魅力所在~

请添加图片描述

挑战与创造都是很痛苦的,但是很充实。

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

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

相关文章

MATLAB环境下基于离散小波变换的体外血管图像处理

下面简要介绍小波变换的部分应用。 信号去噪。小波去噪是根据有效信号和噪声信号在小波变换后表现出的不同特性实现的&#xff0c;一般可用于去除语音、图像、视频等中的噪声信号。小波去噪方法根据对小波系数的非线性处理方式分为三类&#xff0c;分别是小波变换模极大值去噪…

qt QRadioButton 及QButtonGroup 使用

QRadioButton 放在组合框QGroupBox中&#xff0c;再点击时&#xff0c;即使有多个QRadioButton按钮&#xff0c;同时选中的也就只有一个。 如下图所示&#xff0c; 对于多个QRadioButton&#xff0c;每个按钮都写一个槽函数是不太明智的选择&#xff0c;需要将QRadioButton放在…

【LeetCode:2917. 找出数组中的 K-or 值 + 模拟+位运算】

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

excel导出标准化

虽然标题叫标准化&#xff0c;只不过是我自己的习惯&#xff0c;当一件事情变得流程标准化之后&#xff0c;开发程序就会飞快&#xff0c;开发评估工作总是 搞个1~2天&#xff0c;实则前端后端一起开发&#xff0c;1个小时就可以搞定。 1 前端 const exportXls async () >…

Hadoop配置日志的聚集——jobhistory不显示任务问题

问题&#xff1a; 一开始job history是正常的&#xff0c;配置了日志的聚集以后不管做什么任务都不显示任务&#xff0c;hdfs是正常运行&#xff0c;而且根据配置步骤都重启过了。 下面先po出日志聚集的操作步骤&#xff0c;再讲问题 1.配置yarn-site.xml cd $HADOOP_HOME/e…

常见的几种echarts类型

一&#xff1a;折线图 let option {tooltip: {},animation: false,grid: {top: "20%",bottom: "33%", //也可设置left和right设置距离来控制图表的大小left: 5%,right: 5%},xAxis: {boundaryGap:false,data: [1,2,3,4,5],axisLine: {show: true, //隐藏X轴…

工作微信统一管理(还带监管功能)

1.会话页面(可统一管理多个微信号、聚合聊天、手动搜索添加好友、通过验证请求、查看好友的朋友圈等) 2.聊天历史(可查看 所有聊天记录&#xff0c;包括手机.上撤回、删除的消息) 3.群发助手(可以一 -次群发多个好友和群&#xff0c;还可以选择定时发送&#xff0c;目前还在内测…

操作系统---第一课

操作系统&#xff1a; 控制和管理整个计算机系统的硬件和软件资源。向上层提供方便易使用的服务&#xff0c;是最接近硬件的一层软件。 功能&#xff1a;文件管理&#xff0c;存储器管理&#xff0c;设备管理&#xff0c;处理机管理。 操作系统的四个特征&#xff1a; 并发 &…

爬虫实战——scrapy框架爬取多张图片

scrapy框架的基本使用&#xff0c;请参考我的另一篇文章&#xff1a;scrapy框架的基本使用 起始爬取的网页如下&#xff1a; 点击每张图片&#xff0c;可以进入图片的详情页&#xff0c;如下&#xff1a; 代码实现&#xff1a; 项目文件结构如下 img_download.py文件代码 im…

【kubernetes】关于k8s集群的存储卷

目录 一、存储卷的分类 二、empty存储卷以及特点 三、hostpath存储卷以及特点 四、nfs存储卷以及特点 五、pvc存储卷 查看pv的定义 查看pvc的定义 实操&#xff1a;静态创建pv的方式 实现pvc存储卷 步骤一&#xff1a;先完成nfs的目录共享&#xff0c;需要准备不同的目…

自动驾驶革命:解密端到端背后的数据、算力和AI奇迹

作者 |毫末智行数据智能科学家 贺翔 编辑 |祥威 最近&#xff0c;特斯拉FSD V12的发布引发了业界对端到端自动驾驶的热议&#xff0c;业界纷纷猜测FSD V12的强大能力是如何训练出来的。从马斯克的测试视频可以大致归纳一下FSD V12系统的一些核心特征&#xff1a; 训练数据&am…

Linux笔记--make

使用上一节的 main.c、add.c、sub.c文件进行编译&#xff0c;编译的过程有很多步骤&#xff0c;如果要重新编译&#xff0c;还需要再重来一遍&#xff0c;能不能一步完成这些步骤?将这些步骤写到makefile文件中&#xff0c;通过make工具进行编译 一个工程中的源文件不计其数&a…

Sora:AI视频模型的无限可能与挑战

随着人工智能技术的突飞猛进&#xff0c;AI视频模型已成为科技领域的新焦点。OpenAI推出的AI视频模型Sora&#xff0c;凭借其卓越的技术性能和前瞻性&#xff0c;为AI视频领域的发展揭开了新的篇章。本文将从技术解析、应用场景、未来展望、伦理与创意以及用户体验与互动五个方…

<C++>【继承篇】

​ ✨前言✨ &#x1f393;作者&#xff1a;【 教主 】 &#x1f4dc;文章推荐&#xff1a; ☕博主水平有限&#xff0c;如有错误&#xff0c;恳请斧正。 &#x1f4cc;机会总是留给有准备的人&#xff0c;越努力&#xff0c;越幸运&#xff01; &#x1f4a6;导航助手&#x1…

03. Nginx入门-Nginx虚拟主机

Nginx虚拟主机简介 yum安装与源码安装一样&#xff0c;只是Nginx配置文件路径不一致&#xff0c;这里用的yum安装的配置文件路径。 利用虚拟主机的功能&#xff0c;可以在一台Nginx服务器上部署一个或多个虚拟主机。 虚拟主机主配置文件 注意&#xff1a;配置完成Nginx主配置…

MySql安全加固:可信IP地址访问控制 设置密码复杂度

MySql安全加固&#xff1a;可信IP地址访问控制 & 设置密码复杂度 1.1 可信IP地址访问控制1.2 设置密码复杂度 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 1.1 可信IP地址访问控制 当您在创建用户时使用’%作为主机部分&#xff0c;…

MySQL·SQL优化

目录 一 . 前言 二 . 优化方法 1 . 索引 &#xff08;1&#xff09;数据构造 &#xff08;2&#xff09;单索引 &#xff08;3&#xff09;explain &#xff08;4&#xff09;组合索引 &#xff08;5&#xff09;索引总结 2 . 避免使用select * 3 . 用union all代替u…

操作系统的线程管理

线程的概念 线程是“轻量级的进程”。 引入&#xff08;多&#xff09;线程作用 快速线程切换&#xff0c;通信易于实现&#xff0c;并行程度提高&#xff0c;减少&#xff08;系统&#xff09;管理开销 并行实体共享同一个地址空间和所有可用数据的能力。线程比进程更轻量级…

【操作教程】如何在华为云服务器部署安防监控系统EasyCVR平台?

随着视频技术的快速发展&#xff0c;安防视频汇聚平台EasyCVR可支持的协议也在不断拓展&#xff0c;平台兼容多类型的协议接入&#xff0c;包括&#xff1a;国标GB28181、RTSP/Onvif、RTMP&#xff0c;以及厂家的私有协议与SDK&#xff0c;如&#xff1a;海康ehome、海康sdk、大…

【VTKExamples::PolyData】第五十期 VertexConnectivity

很高兴在雪易的CSDN遇见你 VTK技术爱好者 QQ:870202403 公众号:VTK忠粉 前言 本文分享VTK样例VertexConnectivity,并解析接口vtkExtractEdges,希望对各位小伙伴有所帮助! 感谢各位小伙伴的点赞+关注,小易会继续努力分享,一起进步! 你的点赞就是我的动力(^U…