vue3组合式API下封装hooks使用生命周期,在await之后调用hooks会有警告

起因:想封装一个hooks实现echarts图表随屏幕大小resize并且组件销毁时移除监听。结果在组件里面调用这个hooks,有个告警提示 [Vue warn]: onBeforeUnmount is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lifecycle hooks before the first await statement.

在这里插入图片描述


意思是,在没有活跃组件实例可关联的情况下调用了onBeforeUnmount。生命周期注入API只能在setup()执行期间使用。如果您使用了异步setup(),请确保在第一个await语句之前注册生命周期钩子。

因为在页面上面,是先调用了async/await来获取接口数据,获取到数据之后再绘制图表,调用useEcharts hooks


加粗样式


useEcharts 里面是这样写的

在这里插入图片描述


开始思考,咦?不能在await之后再调用生命周期,那不是不能写hooks了?没道理吧?咦,等一下,那vueuse里面的hooks怎么写的,他不是有节流防抖的hooks吗,那必然用到setTimeout这种,咦,那她难道不用调用生命周期函数来清除定时器?遂去看vueuse

在这里插入图片描述


大概是先获取生命周期实例,判断该实例是否存在,若存在,调用vueDemi的onMounted方法,将具体的实现方法传入。
那vueDemi是个啥嘞?onMounted的第二个参数target 又是个啥嘞?


在这里插入图片描述


嗷,是个辅助兼容vue2和vue3的包。那导出的onMounted就是生命周期钩子,那第二参数target是干啥的?看看vue源码

在这里插入图片描述


先调用createHook生成hook,入参是type,应该是vue内部自定义的一些字符串标识,看起来像是取首字母,类似onMounted 取m,onBeforeMount取bm。然后createHook接收两个参数,type 和 target = currentInstance,盲猜currentInstance是组件实例,但不确定,再看看

在这里插入图片描述


咦,getCurrentInstance() 不就是获取组件实例嘛,破案了友友们。 那就好办了

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

测试一下,可以在组件里面调用相同的生命周期钩子,console.log一下看看是否都有输出

在这里插入图片描述
在这里插入图片描述

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

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

相关文章

使用Python实现图像的手绘风格效果

使用Python实现图像的手绘风格效果 一、引言二、代码详细解释与示例三、完整框架流程四、运行五、结论附:完整代码 一、引言 在数字图像处理领域,模拟手绘风格是一项有趣且具有挑战性的任务。手绘风格图像通常具有独特的纹理和深浅变化,给人…

window中借助nginx配置vite+vue项目的反向代理步骤

在官网下载好nginx的安装包后,解压后 CMD打开 start nginx 是启动命令 nginx -s stop 停止服务 nginx -s reload 如果重写了nginx.conf文件,要执行这条命令 正常情况下 成功启动和成功停止服务长这样 错误情况&解决 如果nginx -s stop失败 ngi…

花指令例子

如图所示: 指令EB FF的汇编代码为jmp -1,CPU执行到地址处0x6c80c0的指令EB FF时(jmp -1),EIP为6c80c2, 执行后,EIP为0x6c80c1。但是反汇编器无法自动识别该指令。

关于我的编程语言——C/C++——第八篇

(叠甲:如有侵权请联系,内容都是自己学习的总结,一定不全面,仅当互相交流(轻点骂)我也只是站在巨人肩膀上的一个小卡拉米,已老实,求放过) 什么是C C语言是结…

博客园美化

1、主题介绍 使用的 SimpleMemory 这款主题 github官网 2、设置主题并申请 js 代码权限 3、主题设置 博客侧边栏公告 <script type"text/javascript">window.cnblogsConfig {info: {blogIcon: https://ts1.cn.mm.bing.net/th/id/R-C.85775e482741cb7ab7f…

SpringBoot基础系列学习(二):配置详解

文章目录 一丶依赖二丶配置文件三丶获取配置文件中的信息1.PropertySource("classpath:application2.properties")2. ConfigurationProperties(prefix "baicaizhi1")3. Value4. 使用EnviromentgBean获取5. 使用ResourceBundle获取 一丶依赖 <dependen…

初识Electron 进程通信

概述 Electron chromium nodejs native API&#xff0c;也就是将node环境和浏览器环境整合到了一起&#xff0c;这样就构成了桌面端&#xff08;chromium负责渲染、node负责操作系统API等&#xff09; 流程模型 预加载脚本&#xff1a;运行在浏览器环境下&#xff0c;但是…

建网站怎么建?只需几个步骤

在这个网络飞速发展的时代&#xff0c;越来越多的人都渴望拥有自己的网站。然而&#xff0c;对于大多数新手来说&#xff0c;如何建立自己的网站可能充满了挑战。本文将为您详细介绍建网站的关键步骤&#xff0c;让您能够轻松搭建自己的网站。 选择适合的建站工具 虽然市面上有…

台达控制器与三菱变频器实现EtherCAT转CC-Link IEFB协议通讯方案

一.项目背景&#xff1a; 在某自动化生产车间中&#xff0c;原有系统采用台达的 EtherCAT 控制器来控制多个设备的运动和操作&#xff0c;但车间内的一些关键设备使用的是三菱变频器&#xff0c;且基于 CC-Link IEFB 协议通讯。为了实现整个系统的集中控制和数据统一管理&#…

Js — 防抖及底层实现

防抖&#xff1a;单位时间内&#xff0c;频繁触发事件&#xff0c;只执行最后一次 防抖实现方式&#xff1a; lodash提供的防抖函数_.debounce(func,[wait0],[option]) 延迟wait毫秒后调用func方法 定时器setTimeout 目标&#xff1a;鼠标在盒子上移动&#xff0c;鼠标停止50…

负载均衡式在线oj项目开发文档2(个人项目)

judge模块的框架 完成了网页渲染的功能之后&#xff0c;就需要判断用户提交的代码是否是正确的&#xff0c;当用户点击提交之后&#xff0c;就会交给路由模块的/judge模块&#xff0c;然后这个路由模块就需要去调用jude模块了&#xff0c;也就是需要一个新的jude模块&#xff…

setContentView调用流程(二) -将布局添加到mContentParent

Android setContentView执行流程(一)-生成DecorView Android setContentView执行流程(二)-将布局添加到mContentParent 上篇博客我们介绍了setContentView的第一步即生成DecorView以及获取到mContentParent的流程&#xff0c;同时还提到继承自Activity和AppCompatActivity生成…

【C#设计模式(2)——工厂模式】

前言 工厂模式&#xff1a;使用工厂创建对象。工厂模式的主要目的是分离对象的创建与调用&#xff0c;通过使用工厂统一管理对象的创建。工厂模式可以隐藏对象的创建细节&#xff0c;使客户终端代码只关注使用对象而不需要关注对象的创建过程。 运行结果 代码 #region 食品 /…

Dockerfile

1. Dockerfile 简介 1.1 什么是Dockerfile Dockerfile是一个用于定义和构建Docker镜像的文本文件&#xff0c;它通过一系列指令和参数来描述镜像的构建过程和配置。这些指令包括基础镜像、软件包安装、文件拷贝、环境变量设置等&#xff0c;使得应用程序及其依赖项可以被打包…

VBA高级应用30例应用3在Excel中的ListObject对象:插入行和列

《VBA高级应用30例》&#xff08;版权10178985&#xff09;&#xff0c;是我推出的第十套教程&#xff0c;教程是专门针对高级学员在学习VBA过程中提高路途上的案例展开&#xff0c;这套教程案例与理论结合&#xff0c;紧贴“实战”&#xff0c;并做“战术总结”&#xff0c;以…

C++OJ_二叉树的层序遍历

✨✨ 欢迎大家来到小伞的大讲堂✨✨ &#x1f388;&#x1f388;养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; 所属专栏&#xff1a;C_OJ 小伞的主页&#xff1a;xiaosan_blog 二叉树的层序遍历 102. 二叉树的层序遍历 - 力扣&#xff08;LeetCode&#xff0…

ctfshow-web入门-反序列化(web265-web270)

目录 1、web265 2、web266 3、web267 4、web268 5、web269 6、web270 1、web265 很简单的一个判断&#xff0c;满足 $this->token$this->password; 即可 由于 $ctfshow->tokenmd5(mt_rand()) 会将 token 随机为一个 md5 值&#xff0c;我们使用 & 绕一下&am…

【STL】queue,stack的底层实现

在前面的介绍中我们已经知道了queue和stack是一个容器适配器&#xff0c;它并没有被划分到容器的行列&#xff0c;它只是对其他容器的再封装&#xff0c;在STL中queue和stack默认使用的容器是deque 在数据结构的学习中&#xff0c;我们知道stack和queue可以使用顺序表和链表实现…

Tomcat安装和配置(超详细)

一、Tomcat安装准备 1、tomcat下载 1.1、百度网盘链接下载 链接&#xff1a;https://pan.baidu.com/s/1uceOKe_QcpSQ6yhNxi4T5g?pwd1234 提取码&#xff1a;1234 1.2、官网在线下载 Tomcat官网&#xff1a;https://tomcat.apache.org/download-80.cg…

Ozone调试WSL系统的STM32编译文件配置

文章目录 背景步骤Ozone新建工程流程配置Ozeon找到WSL的代码文件ozone字体调整快速在Ozone中定位到代码文件参考 背景 在使用WSL进行嵌入式软件开发的时候&#xff0c;在debug方面&#xff0c;比较好用的工具有Ozone&#xff0c;那在Windows下调试需要配置和注意的点&#xff…