vue3【详解】选项式 API 实现逻辑复用

  1. 抽离逻辑代码到一个函数
  2. 函数命名约定为 useXxxx格式 ( React Hooks 也是 )
  3. 在 setup 中引用 useXxx 函数

演示代码:实时获取鼠标的坐标

在这里插入图片描述
逻辑封装 useMousePosition.js

// 导入 ref, onMounted, onUnmounted
import { ref, onMounted, onUnmounted } from "vue";function useMousePosition() {// 声明响应式变量 x,ylet x = ref(0);let y = ref(0);function update(e) {// 事件的 pageX 即 x 坐标x.value = e.pageX;// 事件的 pageY 即 x 坐标y.value = e.pageY;}onMounted(() => {// 实例挂载完成时,添加对鼠标移动事件的监听 mousemovewindow.addEventListener("mousemove", update);});onUnmounted(() => {// 实例卸载完成时,移除对鼠标移动事件的监听 mousemovewindow.removeEventListener("mousemove", update);});// 返回 x,yreturn {x,y,};
}// 默认导出函数 useMousePosition
export default useMousePosition;

页面使用 index.vue

<script setup>
import useMousePosition from "./useMousePosition";let { x, y } = useMousePosition();
</script><template><p>鼠标 x 坐标: {{ x }}</p><p>鼠标 y 坐标: {{ y }}</p>
</template>

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

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

相关文章

锐捷云桌面的安装

按下 <DEL> 键进入 BIOS setup 界面&#xff08;初始密码为 admin &#xff09;。 输入密码之后就进入 BIOS 的 Main 界面 设置服务器 BMC IP 地址。 a 云服务器启动后&#xff0c;在 BIOS 的主页面&#xff0c;把光标移到 [Server Mgmt] 项。 b 选择 [BMC Network C…

游戏前摇后摇Q闪E闪QE闪QA等操作

备注&#xff1a;未经博主允许禁止转载 个人笔记&#xff08;整理不易&#xff0c;有帮助&#xff0c;收藏点赞评论&#xff0c;爱你们&#xff01;&#xff01;&#xff01;你的支持是我写作的动力&#xff09; 笔记目录&#xff1a;学习笔记目录_pytest和unittest、airtest_w…

基于Springboot的社区防疫物资申报系统(有报告)。Javaee项目,springboot项目。

演示视频&#xff1a; 基于Springboot的社区防疫物资申报系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系…

Quartz + SpringBoot 实现分布式定时任务

文章目录 前言一、分布式定时任务解决方案二、Quartz是什么&#xff1f;1.quartz简介2.quartz的优缺点 二、Quartz分布式部署总结 前言 因为应用升级&#xff0c;由之前的单节点微服务应用升级为集群微服务应用&#xff0c;所以之前的定时任务Spring Scheduled不再适用了&…

SV-704LW 无线WIFI网络音柱

SV-704LW 无线WIFI网络音柱(工业级) 一、描述 SV-704LW是深圳锐科达电子有限公司的一款壁挂式WIFI无线网络音柱&#xff0c;通过WIFI无线接入到WIFI覆盖的网络中&#xff0c;可将网络音源通过自带的功放和喇叭输出播放&#xff0c;其采用防水设计&#xff0c;功率可以从30W到6…

如何利用FLUENT计算流体力学方法解决大气与环境领域流动问题

ANSYS FLUENT是目前全球领先的商用CFD 软件&#xff0c;市场占有率达70%左右&#xff0c;是工程师和研究者不可多得的有力工具。由于采用了多种求解方法和多重网格加速收敛技术&#xff0c;因而FLUENT能达到最佳的收敛速度和求解精度。灵活的非结构化网格和基于解的自适应网格技…

从OWASP API Security TOP 10谈API安全

1.前言 应用程序编程接口&#xff08;API&#xff09;是当今应用驱动世界创新的一个基本元素。从银行、零售、运输到物联网、 自动驾驶汽车、智慧城市&#xff0c;API 是现代移动、SaaS 和 web 应用程序的重要组成部分&#xff0c;可以在面向客 户、面向合作伙伴和内部的应用程…

计算机组成原理 — 控制单元的功能

控制单元的功能 控制单元的功能微操作命令分析取指周期间址周期执行周期中断周期 控制单元的功能控制单元的外特性输入信号输出信号 控制信号举例不采用CPU内部总线的方式取指周期间址周期执行周期 采用CPU内部总线的方式取指周期间址周期执行周期 多级时序系统机器周期时钟周期…

反激电源——TL431及光耦反馈电路计算(不涉及环路补偿)

一、TL431及光耦反馈电路 TL431以及光耦电路是反激的副边反馈类型电路中的常见应用。 其反馈工作原理为&#xff1a;当副边的输出电压升高时&#xff0c;TL431的REF点采样电压也会升高&#xff0c;使得TL431的导通量增加&#xff0c;同时光耦内部的发光二极管流过的电流也增大&…

线段树汇总

线段树是一种二叉搜索树&#xff0c;与区间树相似&#xff0c;它将一个区间划分成一些单元区间&#xff0c;每个单元区间对应线段树中的一个叶结点。 使用线段树可以快速的查找某一个节点在若干条线段中出现的次数&#xff0c;时间复杂度为O(logN)。而未优化的空间复杂度为2N&a…

SpringCloud系列(4)--SpringCloud微服务工程构建

前言&#xff1a;在上节我们新建了一个SpringCloud父工程&#xff0c;这一节主要是构建微服务工程&#xff0c;通过实现订单模块和支付模块来熟悉微服务的概念和构建过程。 1、在父工程下新建模块 2、选择模块的项目类型为Maven并选择模块要使用的JDK版本 3、填写子模块的名称&…

企业网盘搭建——LNMP

php包链接&#xff1a;https://pan.baidu.com/s/1RElYTQx320pN6452N_7t1Q?pwdp8gs 提取码&#xff1a;p8gs 网盘源码包链接&#xff1a;https://pan.baidu.com/s/1BaYqwruka1P6h5wBBrLiBw?pwdwrzo 提取码&#xff1a;wrzo 目录 一.手动部署 二.自动部署 一.手动部署 …

SQL表连接详解:JOIN与逗号(,)的使用及其性能影响

省流版 在这个详细的解释中&#xff0c;我们将深入探讨SQL中表连接的概念&#xff0c;特别是JOIN和逗号&#xff08;,&#xff09;在连接表时的不同用法及其对查询性能的影响。通过实际示例和背后的逻辑分析&#xff0c;我们将揭示在不同场景下选择哪种连接方式更为合适。 1.…

BioTech - 使用 Amber 工具 松弛(Relaxation) 蛋白质三维结构 (Python)

欢迎关注我的CSDN:https://spike.blog.csdn.net/ 本文地址:https://spike.blog.csdn.net/article/details/137889532 Amber 工具在蛋白质 松弛(Relaxation) 过程中起着重要的作用。在分子动力学模拟中,蛋白质松弛是指模拟过程中蛋白质结构达到一个较为稳定的状态。这个过程通…

社交媒体数据恢复:推特、Twitter

推特&#xff08;Twitter&#xff09;数据恢复&#xff1a;如何找回丢失的内容 随着社交媒体的普及&#xff0c;越来越多的人开始使用推特&#xff08;Twitter&#xff09;来分享生活点滴、发表观点和获取信息。然而&#xff0c;有时候我们会不小心删除了重要的推文&#xff0…

根据 Excel 列生成 SQL

公司有个历史数据刷数据的需求, 开发功能有点浪费, 手工刷数据有点慢, 所以研究了下 excel 直接生成 SQL, 挺好用, 记录一下; 例如这是我们的数据, 要求把创建时间和完成时间刷进数据库中, 工单编号唯一 Excel 公式如下: "UPDATE service_order SET create…

工业控制(ICS)---MMS

MMS 工控领域的TCP协议&#xff0c;有时wireshark会将response包解析为tcp协议&#xff0c;影响做题&#xff0c;如果筛选mms时出现连续request包&#xff0c;考虑wireshark解析错误&#xff0c;将筛选条件删除手动看一下 initiate&#xff08;可以理解为握手&#xff09; i…

DRF 序列化类serializer单表

【五】序列化类serializer单表 【1】主要功能 快速序列化 将数据库模型类对象转换成响应数据&#xff0c;以便前端进行展示或使用。这些响应数据通常是以Json&#xff08;或者xml、yaml&#xff09;的格式进行传输的。 反序列化之前数据校验 序列化器还可以对接收到的数据进行…

宝塔要注意的问题

数据库创建访问权限要全部人 反向代理1 打包dist,并不会有反向代理&#xff0c;所以宝塔里面要配置 反向代理2 这种去掉/api为/&#xff0c;上面的并没有去掉 rewrite ^/api/(.*)$ /$1 break;

hcia datacom课程学习(6):路由与路由表基础

1.路由的作用 不同网段的设备互相通信需要具有路由功能的设备进行转发 具有路由功能的设备不一定是路由器&#xff0c;交换机可以有路由功能&#xff0c;同样的&#xff0c;路由器也可以有交换功能&#xff0c;像家里常用的路由器就是集路由功能和交换功能于一体的 2.路由相…