vue3学习六 hooks

news2024/12/26 22:36:20

vue3中的 hooks 它的作用, 有点像 vue2中的mixins 的作用
相当于是把一个功能性的一组方法, 封装的别的地方, 当每一个 component中需要用到相应的组件的时候, 可以很方便用引入其中来使用

举个栗子
我们有很多的页面, 但是每一个页面都有一个共同的功能, 就是 倒计时的效果, 如果我们每一个页面都去写倒计时的代码, 肯定是浪费功夫
所以, 我们就可以写一个 hooks
在这里插入图片描述
如果, 我新建了一个 hooks的文件夹, 用来存放 很多的hooks 文件, 在这个js文件中, 可以使用 setup中的所有写法, 完成之后, 把得到的结果 返回出去就可以了。
再来看一下, 我们在component组件中是怎么引入使用的

在这里插入图片描述
首先, 我们从文件中引入 hooks中要使用的js 文件
然后, 在setup中把返回的数据给拿到,之后在setup中return 出去

在这里插入图片描述
从上面的图中可以看到,
hooks 中的生命周期 要优先于 component中的 生命周期先的执行, 但不会覆盖


hooks 文件中也可以定义方法, 然后返回出去
在这里插入图片描述
在这里插入图片描述
接收后, 数据是可以用的, 并且这种的做法, 不会出再重名的问题

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

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

相关文章

虚拟面试系统安装使用说明

虚拟面试系统安装使用说明 虚拟面试系统是程序员参加面试的虚拟系统,该软件中的测试题只针对程序员设计,不针对其它人员。面试流程可适用于所有大众行业。 一.安装与卸载 1.安装 本软件只有安装之后,才能运行。 安装方…

【Golang】排查 Build constraints exclude all the go files 的几个思路

输出该问题时说明在 Go 语言的启动编译(Build)阶段,出现了编译问题,往往是编译配置的问题。可以通过以下思路去排查对应的错误。 一、查看 go env 😶‍🌫️ (1)首先可以查看被排除的…

【iOS开发】理解OC的类,父类,元类的关系

文章目录 前言1.1 类和对象的关系2.1 类的结构体2.2对象的结构体2.2.1元类2.2.2 涉及消息转发机制2.2.3 元类也有类2.3.4 对象和Class的 isa指针 前言 在OC中,有对象objc,有类Class,有父类SuperClass,其实还有一种元类MetaClass。…

嚯——ChatGPT是很强,但也会胡说八道。。。

现在的ChatGPT确实强,但是也会一本正经的胡说八道,例如它回答“nineteen”中有12个字母、或是旗鱼是哺乳动物…… 尽管ChatGPT可以生成流畅甚至优雅的散文,轻松通过困扰了AI领域超过70年的图灵测试基准,但它也可能看起来非常愚蠢…

【设计模式】| 修炼内功 | 23种设计模式——单例模式

设计模式如同织锦之艺术,精心构筑,展示优美。 学习设计模式,犹如追逐清晨的曙光,扉页掀开了人生的新篇章。当你学会设计模式的奥秘,就如同走进了灯火通明的城市,丰富多彩的建筑,让你大开眼界&am…

Postman安装及入门接口测试使用步骤

前言 在软件测试行业中,作为一款比jemter更便捷更好用的软件测试工具,postman以其便捷灵活性首当其冲,成为当今测试行业领域使用较广泛的主流系统软件接口测试工具。今天Darren洋为大家讲解postman这款软件测试工具的下载安装及入门接口测试步…

Sentinel实现动态配置的集群流控的方法

Sentinel实现动态配置的集群流控的方法 介绍 06-cluster-embedded-8081 为什么要使用集群流控呢? 相对于单机流控而言,我们给每台机器设置单机限流阈值,在理想情况下整个集群的限流阈值为机器数量✖️单机阈值。不过实际情况下流量到每台…

拉绳位移传感器连接到PLC并采集数据到物联网云平台

拉绳位移传感器是一种利用绳材收卷轮周长来计量物体长度或距离的传感器设备,其作用就像是一把卷尺,通过拉绳的长度变化测出位移量,并转换为数字量提供到电子信息系统中,在建筑、水利、地质勘察、采矿、制造加工以及渔业等广泛应用…

elementUI中折叠面板箭头图标位置调整到最左边

跟flex布局有关 原始代码 <div id"app"> <el-collapse v-model"activeNames" change"handleChange"><el-collapse-item title"一致性 Consistency" name"1"><div>与现实生活一致&#xff1a;与现…

Centos8下编译安装最新版ffmpeg解决方案(含Centos8换源阿里云)

文章目录 1、下载FFmpeg源代码2、安装依赖3、配置编译选项&#xff08;关键&#xff09;linux依赖手动编译安装centos8换源阿里云 4、编译源代码5、安装FFmpeg6、验证安装 1、下载FFmpeg源代码 FFmpeg官网&#xff08;https://ffmpeg.org/download.html&#xff09;git clone …

python数据分析案例——天猫订单综合分析

前言 大家早好、午好、晚好吖 ❤ ~欢迎光临本文章 什么是数据分析 明确目的–获得数据(爬虫&#xff0c;现有&#xff0c;公开的数据)–数据预处理——数据可视化——结论 准备 环境使用&#xff1a; 在开始写我们的代码之前&#xff0c;我们要准备好运行代码的程序 Anacon…

Java Stream API的基本使用方法

前言 Java各个版本所更新的主要内容&#xff1a; 1.Java SE 8&#xff1a;引入了一些新特性&#xff0c;如lambda表达式、Stream API、格式化日期、国际化等。此外&#xff0c;还对并发编程进行了改进&#xff0c;引入了线程安全的Stream API。 2.Java SE 9&#xff1a;新增了…

李沐论文精度系列之十:GPT-4

文章目录 一、AIGC资讯速览1.1 Toolformer&#xff08;2023.2.9&#xff09;1.2 ChatGPT plugin1.3 LLaMA&#xff08;2023.2.24&#xff09;1.4 Visual ChatGPT&#xff08;2023.3.8&#xff09;1.5 GigaGAN&#xff08;2023.3.9&#xff09;1.6 Stanford Alpaca&#xff08;2…

面试官:详细说一下Java语言层面3种IO模型的实现

在Java中&#xff0c;一共有三种IO模型&#xff0c;分别是阻塞IO(BIO)、非阻塞IO(NIO)和异步IO(AIO)。 Linux五种IO模型和Java三种IO模型 Java BIO Java BIO就是Java的传统IO模型&#xff0c;对应了操作系统IO模型里的阻塞IO。 Java BIO相关的实现都位于java.io包下&#xf…

ECMA 各版本特性汇总

&#xff08;走运时,要想到倒霉&#xff0c;不要得意得过了头&#xff1b;倒霉时,要想到走运&#xff0c;不必垂头丧气。心态始终保持平衡&#xff0c;情绪始终保持稳定&#xff0c;此亦长寿之道。。——季羡林&#xff09; ECMA ecma官方网站 ecma github版本记录 w3schools …

由浅入深,聊聊OkHttp的那些事(易懂,不繁琐)

作者&#xff1a;Petterp 引言 在 Android 开发的世界中&#xff0c;有一些组件&#xff0c;无论应用层技术再怎么迭代&#xff0c;作为基础支持&#xff0c;它们依然在那里。 比如当我们提到网络库时&#xff0c;总会下意识想到一个名字&#xff0c;即 OkHttp 。 尽管对于大…

LVS和nginx和keepalived四层和7层的一些测试,nginx和keepalived共用环境的部署,lvs,nginx客户端IP透传

LVS和nginx的测试 实验DR模式 服务器IP备注mysql192.168.137.178测试服务器lvs**vip ** 192.168.137.99 RIP 192.168.137.100lvs服务器nginx1RIP 192.168.137.101nginx2RIP 192.168.137.102 LVS四层代理 test----lvs vip—nginx1/ngin2 LVS服务器的配置 [rootlvs openres…

Databend 开源周报第 92 期

Databend 是一款现代云数仓。专为弹性和高效设计&#xff0c;为您的大规模分析需求保驾护航。自由且开源。即刻体验云服务&#xff1a;https://app.databend.cn 。 Whats On In Databend 探索 Databend 本周新进展&#xff0c;遇到更贴近你心意的 Databend 。 在 WHERE 子句中…

算法记录 | Day56 动态规划

583.两个字符串的删除操作 思路&#xff1a; 1.确定dp数组&#xff08;dp table&#xff09;以及下标的含义&#xff1a;dp[i][j]&#xff1a;以i-1为结尾的字符串word1&#xff0c;和以j-1位结尾的字符串word2&#xff0c;想要达到相等&#xff0c;所需要删除元素的最少次数…

别去外包,干了3年,彻底废了......

先说一下自己的情况。大专生&#xff0c;19年通过校招进入湖南某软件公司&#xff0c;干了接近3年的测试&#xff0c;今年年上旬&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落&#xff01;而我已经在一个企业干了三年&#xff0c…