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.rhkb.cn/news/467353.html

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

相关文章

wget命令之Tomcat(三)

引言 Tomcat是一个开源的Java Web应用服务器,实现了多个关键的Java EE规范,包括Servlet、JSP(JavaServer Pages)、JavaWebSocket等。由于Tomcat技术先进、性能稳定且免费,它成为了许多企业和开发者的首选Web应用服务器…

【机器学习】决定系数(R²:Coefficient of Determination)

决定系数,也称为 R 平方,是一种用于衡量回归模型预测效果的统计指标。它表示了模型解释目标变量总变异的程度,数值介于 0 和 1 之间,数值越接近 1 表明模型的解释力越强。 1. 的定义和公式 的公式如下: 其中&#xf…

Cross Modal Transformer: Towards Fast and Robust 3D Object Detection

代码地址 https://github.com/junjie18/CMT 1. 引言 在本文中,我们提出了Cross-Modal Transformer(CMT),这是一种简单而有效的端到端管道,用于鲁棒的3D对象检测(见图1(c)&#xf…

十四、Linux线程(一)

1.守护进程 1.守护进程的特点 是后台服务进程 独立于控制终端 周期性执行某任务 不受用户登录注销影响 一般采用以d结尾的名字(服务) 2.进程组 进程的组长: 组里边的第一进程 进程组的ID进程中的组长的ID 进程中组长的选择&#xff1…

多模态数字人AI产品正在革新金融业,解密头部银行、证券公司都在用的AI工具

在人工智能迅猛发展的时代背景下,金融业正迎来一场深刻的变革。 多模态的人工智能,以其独特的魅力,正在重塑金融行业的格局,为金融服务带来前所未有的新想象。从今年以来行业对AI技术的探索与实践中,AIGC 3D数字人多模…

多态性核SSR的鉴定

多态性核SSR的鉴定 文章目录 多态性核SSR的鉴定前言一、使用bwa对测序数据进行mapping二、使用SOAPdenovo2对核序列进行从头组装成scaffolds三、使用CandiSSR寻找多态性核SSR3.1. 安装CandiSSR软件的准备3.2. 运行CandiSSR时的准备3.3. 整理得到的结果文件 四、统计Contig的数量…

【AIGC探索】AI实现PPT生产全流程

AI实现PPT生产流程 简单概括流程就是: 选择用百度文库AI生成PPT,使用WPS和islide辅助美化,使用文字大模型生成大纲,使用宏指令快速规范细节。 理由如下: 大多数PPT工具生成大纲会有文字篇幅限制,通过大模型…

鸿蒙ArkTS中的获取网络数据

一、通过web组件加载网页 在C/S应用程序中,都有网络组件用于加载网页,鸿蒙ArkTS中也有类似的组件。   web组件,用于加载指定的网页,里面有很多的方法可以调用,虽然现在用得比较少,了解还是必须的。   演…

数学建模(基于Python实现)--灰色关联分析法讲解,含案例

前言 这是去年底学数学建模老哥的建模课程笔记; 未来本人将陆陆续续的更新数学建模相关的一些基础算法,大家可以持续关注一下,主要在于运用; 提示:数学建模只有实战才能提升🔥​🔥​&#x1f…

【go从零单排】error错误处理及封装

🌈Don’t worry , just coding! 内耗与overthinking只会削弱你的精力,虚度你的光阴,每天迈出一小步,回头时发现已经走了很远。 📗概念 在 Go 语言中,error 是一个内置的接口类型,用于表示错误情…

论文阅读笔记:Depth Pro: Sharp Monocular Metric Depth in Less Than a Second

论文阅读笔记:Depth Pro: Sharp Monocular Metric Depth in Less Than a Second 1 背景1.1 动机1.2 提出的方法 2 创新点3 方法4 模块4.1 训练目标4.2 课程训练 4.3 边缘评价指标4.4 焦距估计 5 效果5.1 和SOTA方法的对比 论文:https://arxiv.org/abs/24…

flutter 项目初建碰到的控制台报错无法启动问题

在第一次运行flutter时,会碰见一直卡在Runing Gradle task assembleDebug的问题。其实出现这个问题的原因有两个。 一:如果你flutter -doctor 检测都很ok,而且环境配置都很正确,那么大概率就是需要多等一会,少则几十分…

跨子网的WinCC客户机/服务器如何实现通讯?

为了更有效地利用有限的IP地址,为了减少广播对网络带宽的占用从而提高带宽,为了实现在不同子网中应用不同的安全策略从而提高网络安全性,现场通常要求划分子网,将安全等级要求不同的计算机安置在不同的子网中,分开管理…

SpringClud一站式学习之Eureka服务治理(二)

SpringClud一站式学习之Eureka服务治理 引言1. 搭建Eureka Server1.1. 添加Eureka Server依赖1.2. 添加 Eureka Server注解1.3. 配置Eureka Server1.4. 运行Eureka Server 2. 搭建Eureka Client 服务提供者2.1. 添加依赖2.2. 添加注解2.3. 配置Eureka Client2.4. 启动服务 3. 搭…

实战攻略 | ClickHouse优化之FINAL查询加速

【本文作者:擎创科技资深研发 禹鼎侯】 查询时为什么要加FINAL 我们在使用ClickHouse存储数据时,通常会有一些去重的需求,这时候我们可以使用ReplacingMergeTree引擎。这个引擎允许你存储重复数据,但是在merge的时候会根据order …

加入GitHub Spark需要申请

目录 加入GitHub Spark需要申请 GitHub Spark 一、产品定位与特点 二、核心组件与功能 三、支持的AI模型 四、应用场景与示例 五、未来展望 六、申请体验 加入GitHub Spark需要申请 GitHub Spark 是微软旗下GitHub在2024年10月30日的GitHub Universe大会上推出的一款革…

鸿蒙与团结引擎c#与ts简单交互

目录 团结中调用ts代码 鸿蒙中调用团结代码 首先在团结创建代码,需要将代码添加到场景物体中 devecoStudio端编写ts代码 在index页面添加一个测试按钮 团结中调用ts代码 团结引擎 - 手册: Call TypeScript plug-in code from C# scripts 注册函数要跟文件名一致 在u…

Qt QCustomplot 在采集信号领域的应用

文章目录 一、常用的几种开源库:1、QCustomPlot:2、QChart:3、Qwt:QCustomplot 在采集信号领域的应用1、应用实例时域分析频谱分析2.数据筛选和处理其他参考自然界中的物理过程、传感器和传感器网络、电路和电子设备、通信系统等都是模拟信号的来源。通过可视化模拟信号,可以…

世优科技携手人民中科打造AI数字人智能体助力智慧校园

近日,世优科技与人民中科携手,为中国劳动关系学院开发了一款AI数字人助手,不仅在校园内部承担日常问询、交互工作,还在学校的展厅中担任讲解员的角色,为师生们提供生动详尽的导览服务。 中国劳动关系学院作为中华全国总…

7.2、实验二:被动接口和单播更新

源文件链接: 7.2、实验二:被动接口和单播更新: https://url02.ctfile.com/d/61945102-63671890-6af6ec?p2707 (访问密码: 2707) 一、被动接口 1.介绍 定义: 在路由协议的配置中,一个被动接口指的是一个接口不发送路由更新包的配置方式&a…