从 vue 源码看问题 — 你知道 Hook Event 吗?
前言
在之前的几篇文章中,都有提到 vue 中调用生命周期钩子时是通过 callHook() 方法进行调用的,比如在初始化篇章中调用 beforeCreate 和 created 生命周期钩子方式如下:

那么接下来一起来了解下到底什么是 Hook Event ?
Hook Event
是什么?
Hook Event 在 vue 的官方文档中并没有提及到,这也是很多人很少或者几乎没有使用到 Event Hook 的主要原因,但这不代表不可以使用.
Vue 中提供了对应的生命周期钩子,方便开发者在特定的时间节点进行对应的逻辑处理,比如:在组件的 mounted 生命周期钩子中,准备组件渲染所需要的数据.
而 Hook Event 是通过 Vue 中 自定义事件 + 生命周期钩子 的方式,实现从组件外部为组件注入额外生命周期方法的功能.
怎么用?
这里直接通过一个简单的例子来快速了解 Hook Event 的使用.
首先通过 Vue.component() 注册了 ListView 主要用于列表渲染,在其 mounted 生命周期钩子中通过 setTimeout() 模仿接口请求,并在模板中进行使用 <list-view @hook:mounted="mountedAction"></list-view>,接着通过 @hook:mounted="mountedAction" 向列表组件组件中注入了外部定义的 mounted 钩子中需要执行的事件,此时控制台上的输出结果为:

这就证明了 Hook Event 就是通过 自定义事件 + 生命周期钩子 的方式,实现从组件外部为组件注入额外生命周期方法.
具体代码如下:
// HTML 模板<div id="app"><list-view @hook:mounted="mountedAction"></list-view></div>// JS 逻辑 <script>// 第三方 vue 组件Vue.component('ListView', {template:`<ul class="list-view"><li v-for="item in list">{{ item }}</li></ul>`,data(){return {list: []}},mounted(){console.log("mounted in ListView...");setTimeout(()=>{this.list = [1,2,3,4,5,6];},1000);}});new Vue({el: '#app',methods:{mountedAction(){console.log("mountedAction from parent...");}}});</script>
callHook() 方法
文件位置:src\core\instance\lifecycle.js
callHook 中通过 vm._hasHookEvent 标识判断是否存在 Hook Event,而这个标识是在 Vue.prototype.$on 实例方法中进行定义的,详情可看 eventsMixin(Vue) 方法.
export function callHook (vm: Component, hook: string) {// #7573 disable dep collection when invoking lifecycle hooks// 调用前打开依赖收集 pushTarget()// 从组件配置项中获取对应的生命周期钩子,类型为数组const handlers = vm.$options[hook]const info = `${hook} hook`if (handlers) {for (let i = 0, j = handlers.length; i < j; i++) {// 通过 apply 或 call 的方式调用生命周期函数invokeWithErrorHandling(handlers[i], vm, null, vm, info)}}// 如果有 HookEvent 事件传入,则通过 $emit 调用这个事件,如 hook:mountedif (vm._hasHookEvent) {// 本质就是执行 vm._events['hook:mounted'] 数组中的所有处理函数vm.$emit('hook:' + hook)}// 调用完成后关闭依赖收集popTarget()
}
invokeWithErrorHandling() 方法
文件位置:src\core\util\error.js
/*1. 使用 try catch 包裹生命周期钩子中的逻辑,便于进行异常捕获2. 调用生命周钩子:有 args 参数通过 apply 调用,否则通过 call 调用3. 返回调用结果
*/
export function invokeWithErrorHandling (handler: Function,context: any,args: null | any[],vm: any,info: string
) {let restry {res = args ? handler.apply(context, args) : handler.call(context)if (res && !res._isVue && isPromise(res) && !res._handled) {res.catch(e => handleError(e, vm, info + ` (Promise/async)`))// issue #9511// 避免在嵌套调用时多次触发 catchres._handled = true}} catch (e) {// 异常处理handleError(e, vm, info)}return res
}
总结
Hook Event 原理是什么?
首先 Hook Event 的作用实现从组件外部为组件注入额外生命周期方法的功能,主要是通过 自定义事件 + 生命周期钩子 的方式实现的.
vue在处理组件如<comp @hook:lifecycle="customMethod" />时,会将这个事件通过vm.$on() 即 Vue.prototype.$on()方法进行监听处理,并且遇到格式为hook:xx的事件时,会将vm._hasHookEvent置为true,表示该组件有Hook Event- 在通过
callHook()方法调用生命周期钩子时,会以循环的方式执行组件上对应的生命周期钩子 - 在执行完后组件上的生命周期钩子后,会通过
vm._hasHookEvent标识判断当前组件是否存在Hook Event,如果存在就通过vm.$emit('hook:xxx') 即 Vue.prototype.$emit()方法调用vm._events['hook:xxx']事件上的所有处理函数
相关文章:
从 vue 源码看问题 — 你知道 Hook Event 吗?
前言 在之前的几篇文章中,都有提到 vue 中调用生命周期钩子时是通过 callHook() 方法进行调用的,比如在初始化篇章中调用 beforeCreate 和 created 生命周期钩子方式如下: 那么接下来一起来了解下到底什么是 Hook Event ? Hook Event 是什…...
信息安全工程师(68)可信计算技术与应用
前言 可信计算技术是一种计算机安全体系结构,旨在提高计算机系统在面临各种攻击和威胁时的安全性和保密性。 一、可信计算技术的定义与原理 可信计算技术通过包括硬件加密、受限访问以及计算机系统本身的完整性验证等技术手段,确保计算机系统在各种攻击和…...
每日OJ题_牛客_相差不超过k的最多数_滑动窗口_C++_Java
目录 牛客_相差不超过k的最多数_滑动窗口 题目解析 C代码 Java代码 牛客_相差不超过k的最多数_滑动窗口 相差不超过k的最多数_牛客题霸_牛客网 (nowcoder.com) 描述: 给定一个数组,选择一些数,要求选择的数中任意两数差的绝对值不超过 …...
来咯来咯webSocket
在项目总目录下 设置socketServe文件夹 里面创建下面两个文件 使用的时候需要开启 node webSocket.cjs var { Server } require(ws); var moment require(moment);const wss new Server({port: 8888 });let id 0; let onlineMemberList []; const defaultUser user;wss…...
Android CALL关于电话音频和紧急电话设置和获取
获取音频服务,设置音源类型:电话类型和获取最大电话音量,响铃模式 private AudioManager mAudioManager; mAudioManager (AudioManager) getSystemService(AUDIO_SERVICE); mAudioManager.setStreamVolume(AudioManager.STREAM_VOIC…...
【春秋云镜】CVE-2023-23752
目录 CVE-2023-23752漏洞细节漏洞利用示例修复建议 春秋云镜:解法一:解法二: CVE-2023-23752 是一个影响 Joomla CMS 的未授权路径遍历漏洞。该漏洞出现在 Joomla 4.0.0 至 4.2.7 版本中,允许未经认证的远程攻击者通过特定 API 端…...
C#-__DynamicallyInvokable
[__DynamicallyInvokable] 属性是用于 .NET Framework 中的特性之一。这个特性通常用于标记在动态语言运行时中可以进行调用的方法或属性。 当一个方法或属性被标记为 [__DynamicallyInvokable],它表明这个成员在动态语言的环境中是可调用的。换句话说,…...
2024年最新10款顶级项目管理软件排行
项目管理软件在现代项目管理中扮演着至关重要的角色,它不仅仅是一个工具,更是一种高效、系统化的方法来管理和优化项目流程,帮助项目经理和团队成员快速了解项目状态,加速项目进展。 进度猫 进度猫是一款以甘特图为向导的轻量级…...
Python NLTK进阶:深入自然语言处理
目录 Python NLTK进阶:深入自然语言处理 1. 文本处理技术 1.1 命名实体识别(NER) 1.2 共指消解 2. 语义分析 2.1 语义角色标注(SRL) 2.2 词义消歧(Word Sense Disambiguation) 3. 机器学…...
【React 的理解】
谈一谈你对 React 的理解 对待这类概念题,讲究一个四字口诀“概用思优”,即“讲概念,说用途,理思路,优缺点,列一遍” 。 React 是一个网页 UI 框架,通过组件化的方式解决视图层开发复用的问题&a…...
软件压力测试有多重要?北京软件测试公司有哪些?
软件压力测试是一种基本的质量保证行为,它是每个重要软件测试工作的一部分。压力测试是给软件不断加压,强制其在极限的情况下运行,观察它可以运行到何种程度,从而发现性能缺陷。 在数字化时代,用户对软件性能的要求越…...
十四届蓝桥杯STEMA考试Python真题试卷第二套第五题
来源:十四届蓝桥杯STEMA考试Python真题试卷第二套编程第五题 本题属于迷宫类问题,适合用DFS算法解决,解析中给出了Python中 map() 和列表推导式的应用技巧。最后介绍了DFS算法的两种常见实现方式——递归实现、栈实现,应用场景——迷宫类问题、图的连通性、树的遍历、拓朴排…...
虚拟机 Ubuntu 扩容
文章目录 一、Vmware 重新分配 Ubuntu 空间二、Ubuntu 扩容分区 一、Vmware 重新分配 Ubuntu 空间 先打开 Vmware ,选择要重新分配空间的虚拟机 点击 编辑虚拟机设置 ,再点击 硬盘 ,再点击 扩展 选择预计扩展的空间,然后点击 扩展…...
内网远程连接解决方案【Frp】
1、从https://github.com/fatedier/frp/releases下载需要的版本,如 frp_0.61.0_linux_amd64.tar.gz 2、解压tar -xvf frp_0.61.0_linux_amd64.tar.gz 3、配置服务端【外网云主机】,修改ftps.toml文件: bindPort 7000 vhostHTTPPort8000…...
浙江欧瑞雅装饰材料有限公司:空间的艺术,定制的智慧!
浙江欧瑞雅装饰材料有限公司:空间的艺术,定制的智慧!在追求生活品质与空间利用并重的当下,浙江欧瑞雅装饰材料有限公司以其卓越的全屋定制服务,成为了众多家庭优化居住环境的理想选择。这家公司,凭借其深厚…...
jfrog artifactory oss社区版,不支持php composer私库
一、docker安装 安装环境:centos操作系统,root用户。 如果是mac或ubuntu等操作系统的话,会有许多安装的坑等着你。 一切都是徒劳,安装折腾那么久,最后还是不能使用。这就是写本文的初衷,切勿入坑就对了。 …...
华为OD机试真题-用户调度问题-2024年OD统一考试(E卷)
最新华为OD机试考点合集:华为OD机试2024年真题题库(E卷+D卷+C卷)_华为od机试题库-CSDN博客 每一题都含有详细的解题思路和代码注释,精编c++、JAVA、Python三种语言解法。帮助每一位考生轻松、高效刷题。订阅后永久可看,发现新题及时跟新。 题目描述 在通信系统中,一…...
前端与后端长连接 方法
1、SSE 一、SSE的主要特点 单向通信:SSE是服务器向客户端的单向通信,客户端不能直接通过SSE向服务器发送消息。文本数据流:SSE传输的主要是文本数据(通常是JSON格式),不适合二进制数据。自动重连&a…...
建议AI产品经理面试准备到这个程度再去
AI产品经理的面试整体的难度不高,和面试官探讨了很多关于做AI平台的方向和思考,其中AI智能客服的搭建被问到的次数最多!面试官也解释了很多他们现在碰到的业务问题和解决方案,收获还是很多的~ ⏭️AI智能客服项目如下 1️⃣ 【预…...
智能交通的未来:深度学习如何改变车辆检测游戏规则
✅作者简介:2022年博客新星 第八。热爱国学的Java后端开发者,修心和技术同步精进。 🍎个人主页:Java Fans的博客 🍊个人信条:不迁怒,不贰过。小知识,大智慧。 💞当前专栏…...
国防科技大学计算机基础课程笔记02信息编码
1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制,因此这个了16进制的数据既可以翻译成为这个机器码,也可以翻译成为这个国标码,所以这个时候很容易会出现这个歧义的情况; 因此,我们的这个国…...
ES6从入门到精通:前言
ES6简介 ES6(ECMAScript 2015)是JavaScript语言的重大更新,引入了许多新特性,包括语法糖、新数据类型、模块化支持等,显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var…...
多场景 OkHttpClient 管理器 - Android 网络通信解决方案
下面是一个完整的 Android 实现,展示如何创建和管理多个 OkHttpClient 实例,分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...
[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?
论文网址:pdf 英文是纯手打的!论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误,若有发现欢迎评论指正!文章偏向于笔记,谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...
C++.OpenGL (10/64)基础光照(Basic Lighting)
基础光照(Basic Lighting) 冯氏光照模型(Phong Lighting Model) #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...
JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作
一、上下文切换 即使单核CPU也可以进行多线程执行代码,CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短,所以CPU会不断地切换线程执行,从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...
成都鼎讯硬核科技!雷达目标与干扰模拟器,以卓越性能制胜电磁频谱战
在现代战争中,电磁频谱已成为继陆、海、空、天之后的 “第五维战场”,雷达作为电磁频谱领域的关键装备,其干扰与抗干扰能力的较量,直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器,凭借数字射…...
【Java学习笔记】BigInteger 和 BigDecimal 类
BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点:传参类型必须是类对象 一、BigInteger 1. 作用:适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...
AGain DB和倍数增益的关系
我在设置一款索尼CMOS芯片时,Again增益0db变化为6DB,画面的变化只有2倍DN的增益,比如10变为20。 这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析: 1. dB与线性增益的换算关系 6dB对应的理论线性增益应为&…...
计算机基础知识解析:从应用到架构的全面拆解
目录 前言 1、 计算机的应用领域:无处不在的数字助手 2、 计算机的进化史:从算盘到量子计算 3、计算机的分类:不止 “台式机和笔记本” 4、计算机的组件:硬件与软件的协同 4.1 硬件:五大核心部件 4.2 软件&#…...
