当前位置: 首页 > news >正文

从 vue 源码看问题 — 你知道 Hook Event 吗?

前言

在之前的几篇文章中,都有提到 vue 中调用生命周期钩子时是通过 callHook() 方法进行调用的,比如在初始化篇章中调用 beforeCreatecreated 生命周期钩子方式如下:

在这里插入图片描述

那么接下来一起来了解下到底什么是 Hook Event

Hook Event

是什么?

Hook Eventvue 的官方文档中并没有提及到,这也是很多人很少或者几乎没有使用到 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 吗?

前言 在之前的几篇文章中&#xff0c;都有提到 vue 中调用生命周期钩子时是通过 callHook() 方法进行调用的&#xff0c;比如在初始化篇章中调用 beforeCreate 和 created 生命周期钩子方式如下: 那么接下来一起来了解下到底什么是 Hook Event &#xff1f; Hook Event 是什…...

信息安全工程师(68)可信计算技术与应用

前言 可信计算技术是一种计算机安全体系结构&#xff0c;旨在提高计算机系统在面临各种攻击和威胁时的安全性和保密性。 一、可信计算技术的定义与原理 可信计算技术通过包括硬件加密、受限访问以及计算机系统本身的完整性验证等技术手段&#xff0c;确保计算机系统在各种攻击和…...

每日OJ题_牛客_相差不超过k的最多数_滑动窗口_C++_Java

目录 牛客_相差不超过k的最多数_滑动窗口 题目解析 C代码 Java代码 牛客_相差不超过k的最多数_滑动窗口 相差不超过k的最多数_牛客题霸_牛客网 (nowcoder.com) 描述&#xff1a; 给定一个数组&#xff0c;选择一些数&#xff0c;要求选择的数中任意两数差的绝对值不超过 …...

来咯来咯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关于电话音频和紧急电话设置和获取

获取音频服务&#xff0c;设置音源类型&#xff1a;电话类型和获取最大电话音量&#xff0c;响铃模式 private AudioManager mAudioManager; mAudioManager (AudioManager) getSystemService(AUDIO_SERVICE); mAudioManager.setStreamVolume(AudioManager.STREAM_VOIC…...

【春秋云镜】CVE-2023-23752

目录 CVE-2023-23752漏洞细节漏洞利用示例修复建议 春秋云镜&#xff1a;解法一&#xff1a;解法二&#xff1a; CVE-2023-23752 是一个影响 Joomla CMS 的未授权路径遍历漏洞。该漏洞出现在 Joomla 4.0.0 至 4.2.7 版本中&#xff0c;允许未经认证的远程攻击者通过特定 API 端…...

C#-__DynamicallyInvokable

[__DynamicallyInvokable] 属性是用于 .NET Framework 中的特性之一。这个特性通常用于标记在动态语言运行时中可以进行调用的方法或属性。 当一个方法或属性被标记为 [__DynamicallyInvokable]&#xff0c;它表明这个成员在动态语言的环境中是可调用的。换句话说&#xff0c;…...

2024年最新10款顶级项目管理软件排行

项目管理软件在现代项目管理中扮演着至关重要的角色&#xff0c;它不仅仅是一个工具&#xff0c;更是一种高效、系统化的方法来管理和优化项目流程&#xff0c;帮助项目经理和团队成员快速了解项目状态&#xff0c;加速项目进展。 进度猫 进度猫是一款以甘特图为向导的轻量级…...

Python NLTK进阶:深入自然语言处理

目录 Python NLTK进阶&#xff1a;深入自然语言处理 1. 文本处理技术 1.1 命名实体识别&#xff08;NER&#xff09; 1.2 共指消解 2. 语义分析 2.1 语义角色标注&#xff08;SRL&#xff09; 2.2 词义消歧&#xff08;Word Sense Disambiguation&#xff09; 3. 机器学…...

【React 的理解】

谈一谈你对 React 的理解 对待这类概念题&#xff0c;讲究一个四字口诀“概用思优”&#xff0c;即“讲概念&#xff0c;说用途&#xff0c;理思路&#xff0c;优缺点&#xff0c;列一遍” 。 React 是一个网页 UI 框架&#xff0c;通过组件化的方式解决视图层开发复用的问题&a…...

软件压力测试有多重要?北京软件测试公司有哪些?

软件压力测试是一种基本的质量保证行为&#xff0c;它是每个重要软件测试工作的一部分。压力测试是给软件不断加压&#xff0c;强制其在极限的情况下运行&#xff0c;观察它可以运行到何种程度&#xff0c;从而发现性能缺陷。 在数字化时代&#xff0c;用户对软件性能的要求越…...

十四届蓝桥杯STEMA考试Python真题试卷第二套第五题

来源:十四届蓝桥杯STEMA考试Python真题试卷第二套编程第五题 本题属于迷宫类问题,适合用DFS算法解决,解析中给出了Python中 map() 和列表推导式的应用技巧。最后介绍了DFS算法的两种常见实现方式——递归实现、栈实现,应用场景——迷宫类问题、图的连通性、树的遍历、拓朴排…...

虚拟机 Ubuntu 扩容

文章目录 一、Vmware 重新分配 Ubuntu 空间二、Ubuntu 扩容分区 一、Vmware 重新分配 Ubuntu 空间 先打开 Vmware &#xff0c;选择要重新分配空间的虚拟机 点击 编辑虚拟机设置 &#xff0c;再点击 硬盘 &#xff0c;再点击 扩展 选择预计扩展的空间&#xff0c;然后点击 扩展…...

内网远程连接解决方案【Frp】

1、从https://github.com/fatedier/frp/releases下载需要的版本&#xff0c;如 frp_0.61.0_linux_amd64.tar.gz 2、解压tar -xvf frp_0.61.0_linux_amd64.tar.gz 3、配置服务端【外网云主机】&#xff0c;修改ftps.toml文件&#xff1a; bindPort 7000 vhostHTTPPort8000…...

浙江欧瑞雅装饰材料有限公司:空间的艺术,定制的智慧!

浙江欧瑞雅装饰材料有限公司&#xff1a;空间的艺术&#xff0c;定制的智慧&#xff01;在追求生活品质与空间利用并重的当下&#xff0c;浙江欧瑞雅装饰材料有限公司以其卓越的全屋定制服务&#xff0c;成为了众多家庭优化居住环境的理想选择。这家公司&#xff0c;凭借其深厚…...

jfrog artifactory oss社区版,不支持php composer私库

一、docker安装 安装环境&#xff1a;centos操作系统&#xff0c;root用户。 如果是mac或ubuntu等操作系统的话&#xff0c;会有许多安装的坑等着你。 一切都是徒劳&#xff0c;安装折腾那么久&#xff0c;最后还是不能使用。这就是写本文的初衷&#xff0c;切勿入坑就对了。 …...

华为OD机试真题-用户调度问题-2024年OD统一考试(E卷)

最新华为OD机试考点合集:华为OD机试2024年真题题库(E卷+D卷+C卷)_华为od机试题库-CSDN博客 每一题都含有详细的解题思路和代码注释,精编c++、JAVA、Python三种语言解法。帮助每一位考生轻松、高效刷题。订阅后永久可看,发现新题及时跟新。 题目描述 在通信系统中,一…...

前端与后端长连接 方法

1、SSE 一、SSE的主要特点 单向通信​&#xff1a;SSE是服务器向客户端的单向通信&#xff0c;客户端不能直接通过SSE向服务器发送消息。文本数据流​&#xff1a;SSE传输的主要是文本数据&#xff08;通常是JSON格式&#xff09;&#xff0c;不适合二进制数据。自动重连​&a…...

建议AI产品经理面试准备到这个程度再去

AI产品经理的面试整体的难度不高&#xff0c;和面试官探讨了很多关于做AI平台的方向和思考&#xff0c;其中AI智能客服的搭建被问到的次数最多&#xff01;面试官也解释了很多他们现在碰到的业务问题和解决方案&#xff0c;收获还是很多的~ ⏭️AI智能客服项目如下 1️⃣ 【预…...

智能交通的未来:深度学习如何改变车辆检测游戏规则

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…...

SpringBoot-17-MyBatis动态SQL标签之常用标签

文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...

CTF show Web 红包题第六弹

提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框&#xff0c;很难让人不联想到SQL注入&#xff0c;但提示都说了不是SQL注入&#xff0c;所以就不往这方面想了 ​ 先查看一下网页源码&#xff0c;发现一段JavaScript代码&#xff0c;有一个关键类ctfs…...

Python爬虫实战:研究feedparser库相关技术

1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代,互联网上存在着海量的信息资源。RSS(Really Simple Syndication)作为一种标准化的信息聚合技术,被广泛用于网站内容的发布和订阅。通过 RSS,用户可以方便地获取网站更新的内容,而无需频繁访问各个网站。 然而,互联网…...

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案&#xff0c;允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...

GitHub 趋势日报 (2025年06月08日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

[Java恶补day16] 238.除自身以外数组的乘积

给你一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O(n) 时间复杂度…...

什么?连接服务器也能可视化显示界面?:基于X11 Forwarding + CentOS + MobaXterm实战指南

文章目录 什么是X11?环境准备实战步骤1️⃣ 服务器端配置(CentOS)2️⃣ 客户端配置(MobaXterm)3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/55aefaea8a9f477e86d065227851fe3d.pn…...

安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”(装配)

船舶制造装配管理现状&#xff1a;装配工作依赖人工经验&#xff0c;装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书&#xff0c;但在实际执行中&#xff0c;工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...

SiFli 52把Imagie图片,Font字体资源放在指定位置,编译成指定img.bin和font.bin的问题

分区配置 (ptab.json) img 属性介绍&#xff1a; img 属性指定分区存放的 image 名称&#xff0c;指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件&#xff0c;则以 proj_name:binary_name 格式指定文件名&#xff0c; proj_name 为工程 名&…...