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

news2024/11/6 16:50:55

前言

在之前的几篇文章中,都有提到 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:mounted
  if (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 res
  try {
    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
      // 避免在嵌套调用时多次触发 catch
      res._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'] 事件上的所有处理函数

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

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

相关文章

html练习2

实现下列图片的效果 代码&#xff1a; <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title><style>* {margin: 0;padding: 0;}#menu {background-color: #0c0048;width: 100%;height: 50px;margin: auto;…

计算机视觉常用数据集Cityscapes的介绍、下载、转为YOLO格式进行训练

我在寻找Cityscapes数据集的时候花了一番功夫&#xff0c;因为官网下载需要用公司或学校邮箱邮箱注册账号&#xff0c;等待审核通过后才能进行下载数据集。并且一开始我也并不了解Cityscapes的格式和内容是什么样的&#xff0c;现在我弄明白后写下这篇文章&#xff0c;用于记录…

Java | Leetcode Java题解之第523题连续的子数组和

题目&#xff1a; 题解&#xff1a; class Solution {public boolean checkSubarraySum(int[] nums, int k) {int m nums.length;if (m < 2) {return false;}Map<Integer, Integer> map new HashMap<Integer, Integer>();map.put(0, -1);int remainder 0;fo…

MATLAB计算朗格朗日函数

1. 朗格朗日函数介绍 朗格朗日函数&#xff08;Lagrange function&#xff09;通常用于优化问题&#xff0c;尤其是带有约束的优化问题。其一般形式为&#xff1a; 其中&#xff1a; f(x) 是目标函数。 是约束条件。 是拉格朗日乘子。 为了编写一个MATLAB代码来计算和绘制…

手机的ip地址是固定的吗?多角度深入探讨

手机的IP地址是否固定&#xff0c;这一问题涉及到网络连接、技术配置以及运营商策略等多个方面。为了全面解答这一问题&#xff0c;我们需要从多个角度进行深入探讨。 首先&#xff0c;明确IP地址&#xff08;Internet Protocol Address&#xff09;的基本概念。IP地址是互联网…

宠物空气净化器推荐,哪款除毛好、噪音小?希喂、352性能对比

大家都有选购宠物空气净化器时在各大品牌里挑挑拣拣、费时费力的体验吧...本以为只要多看点推荐&#xff0c;确定了品牌&#xff0c;就能买到好用的产品&#xff0c;不过实际情况却并非如此。 身为宠物博主&#xff0c;之前用过不少宠物空气净化器&#xff0c;20年还写过几篇测…

`掌握Python-PPTX,让PPt制作变得轻而易举!`

文章目录 掌握Python-PPTX&#xff0c;让PPT制作变得轻而易举&#xff01;背景介绍python-pptx 是什么&#xff1f;如何安装 python-pptx&#xff1f;简单库函数使用方法应用场景常见Bug及解决方案总结 掌握Python-PPTX&#xff0c;让PPT制作变得轻而易举&#xff01; 背景介绍…

【python】OpenCV—Connected Components

文章目录 1、任务描述2、代码实现3、完整代码4、结果展示5、涉及到的库函数6、参考 1、任务描述 基于 python opencv 的连通分量标记和分析函数&#xff0c;分割车牌中的数字、号码、分隔符 cv2.connectedComponentscv2.connectedComponentsWithStatscv2.connectedComponents…

ENSP (虚拟路由冗余协议)VRRP配置

VRRP&#xff08;Virtual Router Redundancy Protocol&#xff0c;虚拟路由冗余协议&#xff09;是一种用于提高网络可用性和可靠性的协议。它通过在多个路由器之间共享一个虚拟IP地址&#xff0c;确保即使一台路由器发生故障&#xff0c;网络依然能够正常运行&#xff0c;防止…

【JS学习】08. web API-事件进阶

Web APIs - 第3天 进一步学习 事件进阶&#xff0c;实现更多交互的网页特效&#xff0c;结合事件流的特征优化事件执行的效率 掌握阻止事件冒泡的方法理解事件委托的实现原理 事件流 事件流是对事件执行过程的描述&#xff0c;了解事件的执行过程有助于加深对事件的理解&…

Hadoop完全分布式环境搭建步骤

【图书介绍】《Spark SQL大数据分析快速上手》-CSDN博客 大数据与数据分析_夏天又到了的博客-CSDN博客 本文介绍Hadoop完全分布式环境搭建方法&#xff0c;这个Hadoop环境用于安装配置Spark。假设读者已经安装好Visual Box 7.0.6虚拟环境与一个CentOS 7虚拟机&#xff08;如果…

H7-TOOL的CAN/CANFD助手增加帧发送成功标识支持, 继续加强完善功能细节

2.27版本固件正式携带此功能&#xff0c;包括之前做的负载率检测和错误信息展示也将集成到这个版本固件中。 对于接收&#xff0c;我们可以直接看到效果&#xff0c;而发送不行&#xff0c;所以打算在发送的地方展示下发送成功标识。CAN发送不像串口&#xff0c;需要等待应答后…

ssm+jsp653基于Javaweb的网上花店系统的设计与实现

博主介绍&#xff1a;专注于Java&#xff08;springboot ssm 等开发框架&#xff09; vue .net php phython node.js uniapp 微信小程序 等诸多技术领域和毕业项目实战、企业信息化系统建设&#xff0c;从业十五余年开发设计教学工作 ☆☆☆ 精彩专栏推荐订阅☆☆☆☆☆不…

操作系统如何执行,他究竟是个什么

硬件中断 所谓硬件中断&#xff0c;其实也是一个执行信号的过程&#xff0c;具体流程如下。 具体要执行什么方法&#xff0c;只需要拿着对应的信号访问中断向量表就就行比如 N就是像cpu发的中断信号。 时钟中断 但是这里面有一个叫做时钟源的东西&#xff0c;其实也是一个外…

音视频入门基础:FLV专题(24)——FFmpeg源码中,获取FLV文件视频信息的实现

一、引言 通过FFmpeg命令可以获取到FLV文件的视频压缩编码格式、色彩格式&#xff08;像素格式&#xff09;、分辨率、码率、帧率信息&#xff1a; 而由《音视频入门基础&#xff1a;FLV专题&#xff08;9&#xff09;——Script Tag简介》和《音视频入门基础&#xff1a;FLV专…

JMM内存模型(面试回答)

1.什么是JMM JMM就是Java内存模型(java memory model)。因为在不同的硬件生产商和不同的操作系统下&#xff0c;内存的访问有一定的差异&#xff0c;所以会造成相同的代码运行在不同的系统上会出现各种问题。所以Java内存模型(JMM)屏蔽掉各种硬件和操作系统的内存访问差异&…

【stablediffusion又出王炸】IC-Light,可以操控图像生成时的光照,光照难题终于被解决了!

IC-Light代表Impose Constant Light,是一个控制图像照明的项目。可以操控图像生成时的光照&#xff0c;对内容主体重新打光生成符合新背景环境光照的图片。这下商品图合成这种需要最大程度保持原有主体 ID 需求的最大的问题解决了。 Controlnet, Layerdiffusion, IC-light… …

创建线程时传递参数给线程

在C中&#xff0c;可以使用 std::thread 来创建和管理线程&#xff0c;同时可以通过几种方式将参数传递给线程函数。这些方法包括使用值传递、引用传递和指针传递。下面将对这些方法进行详细讲解并给出相应的代码示例。 1. 值传递参数 当你创建线程并希望传递参数时&#xff…

react使用Fullcalendar 实战用法

使用步骤请参考&#xff1a;react使用Fullcalendar 卡片式的日历&#xff1a; 需求图&#xff1a; 卡片式的日历&#xff0c;其实我是推荐 antd的&#xff0c;我两个都写了一下都能实现。 antd 的代码&#xff1a; antd的我直接用的官网示例&#xff1a;antd 日历示例 i…

使用 RabbitMQ 有什么好处?

大家好&#xff0c;我是锋哥。今天分享关于【使用 RabbitMQ 有什么好处&#xff1f;】面试题。希望对大家有帮助&#xff1b; 使用 RabbitMQ 有什么好处&#xff1f; 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 RabbitMQ 是一种流行的开源消息代理&#xff0c;广…