vue3 Hooks 封装loading使用

vue3 Hooks 封装loading使用

个人理解:Hooks 就是 钩子 的意思,在特定时机执行的函数

之前不理解Hooks和自定义封装的utils函数有什么区别,它们都是函数,逐步理解到utils函数没有vue里面的响应式api,而自定义Hooks可以使用响应式api,比如:ref、reactive、onMounted等等

举例说明:
loading大家都不陌生,在项目请求接口时需要显示loading加载提示用户正在请求中的操作,在加载完成隐藏loading,显示返回的数据。

下面使用vue3 Hooks 来封装这个业务场景
定义 Hooks 有一个潜规则,就是要 use 开头

// useLoading.ts
import { ref } from 'vue'
export const useLoading = () => {const loading = ref(false)const show = () => {loading.value = true}const hide = () => {loading.value = false}return {loading,hide,show}
}

我这里用的elementui框架,使用v-loading绑定loading变量

<template><div style="width: 300px;height: 300px;border: 1px solid #000" v-loading="loading">  </div><el-button @click="show">显示loading</el-button><el-button @click="hide">隐藏loading</el-button>
</template><script lang="ts" setup>import { useLoading } from '@/hooks/useLoading.ts'const { loading,hide,show} = useLoading()
</script>

使用Hooks是为了让项目整体的开发代码质量更加高,开发功能更加便捷,效率更高

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

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

相关文章

基于微信小程序的传染病酒店隔离平台设计与实现(Java+spring boot+MySQL+微信小程序)

获取源码或者论文请私信博主 演示视频&#xff1a; 基于微信小程序的传染病酒店隔离平台设计与实现&#xff08;Javaspring bootMySQL微信小程序&#xff09; 使用技术&#xff1a; 前端&#xff1a;html css javascript jQuery ajax thymeleaf 微信小程序 后端&#xff1a;…

回归决策树模拟sin函数

# -*-coding:utf-8-*- import numpy as np from sklearn import tree import matplotlib.pyplot as pltplt.switch_backend("TkAgg") # 创建了一个随机数生成器对象 rng rngnp.random.RandomState(1) print("rng",rng) #5*rng.rand(80,1)生成一个80行、1列…

Go语言删除文本文件中的指定行

GO语言删除文本文件中的指定行 1. 思路2. 处理文件3. 处理后的文本文件 1. 思路 假设现在有一个文本文件&#xff0c;我们需要删除文件中乱码的行。我们可以使用go的os库来处理文件&#xff0c;遍历整个文件然后将除过乱码的行写入一个新文件&#xff0c;以此来实现我们的需求…

clion run qt 问题汇总

一、Error copying file “D:/soft/QT/5.15.2/mingw81_64/bin/Qt5Cored.dll” to “D:/work/Ccode/qtproject/cmake-build-debug-qtmingw”.报错 查看路径下确实没有Qt5Cored.dll&#xff0c;只有Qt5Core.dll 注释掉cmakelist中的这三行 重新执行后成功 二、使用CLion编辑u…

【学习】若依源码(前后端分离版)之 “ 分页以及查询的功能实现”

大型纪录片&#xff1a;学习若依源码&#xff08;前后端分离版&#xff09;之 “ 分页以及查询的功能实现” 前端部分后端部分结语 包括代码生成也好&#xff0c;最原始的系统也好&#xff0c;若依里每个页面只要有数据&#xff0c;基本上就有分页的功能&#xff0c;所以理解分…

强化学习基础

强化学习 策略网络输入状态s&#xff0c;输出动作a的概率分布如下&#xff1a; π ( a ∣ s ) \pi(a|s) π(a∣s) 多次训练轨迹如下 r表示回报横轴为T, 1个回合的步骤数纵轴为N, 回合数&#xff0c;1行代表1条轨迹&#xff0c;符合概率分布P [ s 11 a 11 r 11 … … s 1 t …

机器学习实战2决策树算法

文章目录 决策树算法核心是要解决两个的关键问题sklearn中的决策树模型sklearn建模步骤分类树Criterionrandom_state && splitter剪枝参数max_depthmin_samples_leaf&&min_samples_splitmax_features&&min_impurity_decrease确认最优剪枝参数目标权重参…

VR全景智慧文旅,用科技助力旅游业振兴

引言&#xff1a; 近年来&#xff0c;科技的迅猛发展将我们带入一个全新的数字化时代&#xff0c;而虚拟现实&#xff08;Virtual Reality&#xff0c;简称VR&#xff09;技术则以其令人惊叹的全新方式&#xff0c;影响着各个领域。其中&#xff0c;旅游业作为人们探索世界、体…

Camunda 7.x 系列【12】创建流程引擎

有道无术,术尚可求,有术无道,止于术。 本系列Spring Boot 版本 2.7.9 本系列Camunda 版本 7.19.0 源码地址:https://gitee.com/pearl-organization/camunda-study-demo 文章目录 1. ProcessEngine2. 创建流程引擎2.1 Java API2.2 XML 配置2.3 Spring2.4 Spring Boot1. Pr…

系统架构设计师笔记第35期:表现层框架设计

表现层框架设计是指在软件系统中&#xff0c;将用户界面&#xff08;UI&#xff09;和用户交互逻辑与后端业务逻辑分离&#xff0c;使用特定的框架来组织和管理表现层的功能和结构。下面是表现层框架设计的一般步骤和常用技术&#xff1a; 确定需求和功能&#xff1a;首先&…

【2.1】Java微服务:详解Hystrix

✅作者简介&#xff1a;大家好&#xff0c;我是 Meteors., 向往着更加简洁高效的代码写法与编程方式&#xff0c;持续分享Java技术内容。 &#x1f34e;个人主页&#xff1a;Meteors.的博客 &#x1f49e;当前专栏&#xff1a; Java微服务 ✨特色专栏&#xff1a; 知识分享 &am…

用C++实现的RTS游戏的路径查找算法(A*、JPS、Wall-tracing)

在实时策略&#xff08;RTS&#xff09;游戏中&#xff0c;路径查找是一个关键的问题。游戏中的单位需要能够找到从一个地方到另一个地方的最佳路径。这个问题在计算机科学中被广泛研究&#xff0c;有许多已经存在的算法可以解决这个问题。在本文中&#xff0c;我们将探讨三种在…

NeRF基础代码解析

embedders 对position和view direction做embedding。 class FreqEmbedder(nn.Module):def __init__(self, in_dim3, multi_res10, use_log_bandsTrue, include_inputTrue):super().__init__()self.in_dim in_dimself.num_freqs multi_resself.max_freq_log2 multi_resself…

php如何爬取天猫和淘宝商品数据

这篇文章主要介绍了php如何爬取天猫和淘宝商品数据&#xff0c;具有一定借鉴价值&#xff0c;感兴趣的朋友可以参考下&#xff0c;希望大家阅读完这篇文章之后大有收获&#xff0c;下面让小编带着大家一起了解一下。 一、思路 最近做了一个网站用到了从网址爬取天猫和淘宝的商…

row_number()分页返回结果顺序不确定

之前通过row_number()实现分页查询时&#xff1a; select top [PageSize] * from (select row_number() over (order by id desc) as RowNum,*from table ) as A where RowNum > (PageIndex - 1) * PageSize发现查询出来的结果顺序是不确定的&#xff0c;查询官方文档&am…

基于遗传算法改进的支持向量机多分类仿真,基于GA-SVM的多分类预测,支持相机的详细原理

目录 背影 支持向量机SVM的详细原理 SVM的定义 SVM理论 遗传算法的原理及步骤 SVM应用实例,基于遗传算法优化SVM的多分类预测 完整代码包括SVM工具箱:https://download.csdn.net/download/abc991835105/88175549 代码 结果分析 展望 背影 多分类预测对现代智能化社会拥有重…

VGG16模型详解

VGG16模型详解 0、VGG16介绍 VGG16是一种深度卷积神经网络&#xff0c;由牛津大学的研究团队于2014年开发。 VGG16在2014年的ImageNet Large Scale Visual Recognition Challenge (ILSVRC) 竞赛中取得了显著的成绩。它在图像分类任务中获得了当年的第二名&#xff0c;其准确…

matplotlib 笔记 plt.grid

用于添加网格线 主要参数 visible 布尔值&#xff0c;True表示画网格 which表示要显示的刻度线类型&#xff0c;可以是 major&#xff08;主刻度&#xff09;或 minor&#xff08;次刻度&#xff09;&#xff0c;或者同时显示&#xff08;both&#xff09;alpha 透明度 …

音视频--视频数据传输

参考文献 H264码流RTP封装方式详解&#xff1a;https://blog.csdn.net/water1209/article/details/126019272H264视频传输、编解码----RTP协议对H264数据帧拆包、打包、解包过程&#xff1a; https://blog.csdn.net/wujian946110509/article/details/79129338H264之NALU解析&a…

【Redis】初学Redis

目录 使用Redisyum安装redis启动redis操作redis设置远程连接 Redis路线Redis 使用Redis yum安装redis 使用命令&#xff0c;直接将Redis安装到linux服务器&#xff1a; yum -y install redis启动redis redis-server /etc/redis.conf &操作redis redis-cli设置远程连接…