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

vue2 @hook 的解析与妙用

目录

    • 前言
    • 几种用法
      • 用法一 将放在多个生命周期的逻辑,统一到一个生命周期中
      • 用法二 监听子组件生命周期运行的情况
    • 运用场景
      • 场景一 许多时候,我们不得不在不同的生命周期中执行某些逻辑,并且这些逻辑会用到一些通用的变量,这些通用变量按照之前的方式,我们不得不存在data中。
      • 场景二 如果属于同一业务的逻辑要在不同的生命周期中执行,下面这样会更利于阅读和维护。
      • 场景三,想要监听别人封装好的组件(第三方组件)的生命周期,你不可能去第三方子组件的生命周期中写代码。
    • 所有生命周期执行的顺序
      • 第一次渲染
      • 更新时
      • 组件摧毁时

前言

@hook是什么?用来监听组件生命周期的回调函数。

这和生命周期函数mounted,created,updated有什么区别?
区别1:@hook 会在对应的生命周期函数执行后执行。
区别2:@hook 可以在父组件监听子组件的生命周期运行情况。
在这里插入图片描述
从这段vue源代码中我们能看到hook的部分调用逻辑,vm.$emit('hook:' + hook) 其实就是在调用我们写的@hook:mounted="xxx",@hook这个api却没有在官方文档中出现,所以鲜有人知道它的存在和用法。

几种用法

用法一 将放在多个生命周期的逻辑,统一到一个生命周期中

通常写法

export default {components: {},data: () => {return {name: 'dx',};},created() {console.log('created')},beforeMount() {console.log('beforeMount')},mounted() {console.log(this.name);// 每一个小时刷新一次页面setInterval(() => {location.reload()}, 60 * 60 * 1000);},
}

@hook的用法

export default {components: {},data: () => {return {name: 'dx',};},created() {console.log('created');this.$on('hook:beforeMount', () => {console.log('beforeMount');});this.$on('hook:mounted', () => {console.log(this.name); // this 就是组件实例自己// 每一个小时刷新一次页面setInterval(() => {location.reload();}, 60 * 60 * 1000);});},
};

注意

  1. 按照生命周期执行的先后周期,我们只能mounted生命周期里,写这之后的生命周期,而不能写hook:beforeMount
  2. this.$on第二个回调函数的this指的是当前组件实例本身,无论这个回调函数是否是箭头函数。

用法二 监听子组件生命周期运行的情况

通常写法

// 父组件
<Children @buttonRender="ButtonRender"/>export default {name: 'Parents',components: {Children},data: () => {return {name: 'dx',};},methods: {ButtonRender() {console.log('渲染完成')}}
}
// 子组件
export default {name: 'Children',components: {},data: () => {},methods: {},mounted() {this.$emit('buttonRender')}
}

@hook的写法

<Children @hook:mounted="ButtonRender"/>export default {name: 'Parents',components: {Children},data: () => {return {name: 'dx',};},methods: {ButtonRender() {console.log('渲染完成')}}
}

注意

  1. @hook的写法可以不需要在子组件里面编写其它代码
  2. 从vue源码中可以发现 vm.$emit('hook:' + hook) 这里虽然调用了hook但没有返回参数,也就是说,上面代码中ButtonRender没有默认参数。
  3. 同样承接着2来说,由于ButtonRender没有默认参数,所以我们无法在ButtonRender函数中获取子组件Children的实例。

为了解决3的问题,我尝试着想到一种方法,利用ref获取子组件的实例,将子组件的实例拿到父组件的this中。ButtonRender中的this就是父组件实例,和寻常methods中的函数没区别。

<Children ref="child1" @hook:mounted="ButtonRender"/>
export default {name: 'Parents',components: {Children},data: () => {return {name: 'dx'};},mounted() {},methods: {ButtonRender() {console.log(this.$refs.child1) // this.$refs.child1就是子组件Children的实例了console.log('渲染完成')}}
};

但是,我们都知道,vue ref的绑定都是挂载完成之后,所以这个方法也只能用在@hook:mounted@hook:updated等mounted之后执行的生命周期中,而不能用在 比如@hook:beforeMount中。

运用场景

场景一 许多时候,我们不得不在不同的生命周期中执行某些逻辑,并且这些逻辑会用到一些通用的变量,这些通用变量按照之前的方式,我们不得不存在data中。

<script>
export default {data() {return {timer:null}}mounted () {this.timer = setInterval(() => {// todo}, 1000);}beforeDestroy () {clearInterval(this.timer)}
}
</script>

优化后,就不存在这个问题,是不是很好用。

<script>
export default {mounted () {const timer = setInterval(() => {// todo}, 1000);this.$once('hook:beforeDestroy', function () {clearInterval(timer)})}
}
</script>

场景二 如果属于同一业务的逻辑要在不同的生命周期中执行,下面这样会更利于阅读和维护。

export default {created() {this.$on('hook:mounted', () => {挂载时执行一些业务A相关逻辑})this.$on('hook:updated', () => {挂载时执行一些业务A相关逻辑})this.$once('hook:beforeDestroy', () => {挂载时执行一些业务A相关逻辑})}
}

场景三,想要监听别人封装好的组件(第三方组件)的生命周期,你不可能去第三方子组件的生命周期中写代码。

比如 element-ui 的button组件,在子组件渲染完成后,我想做某些逻辑变更。

<el-button type="primary" @hook:mounted="ButtonRender" :disabled="disabled">{{name}}</el-button>export default {name: 'Parents',data: () => {return {name: 'dx',disabled: true};},methods: {ButtonRender() {this.disabled = falsethis.name = 'yx'}}
}

所有生命周期执行的顺序

第一次渲染

父beforeCreate
父 hook:beforeCreate
父created
父 hook:created
父beforeMount
父 hook:beforeMount
子beforeCreate
子hook:beforeCreate
子created
子hook:created
子beforeMount
子hook:beforeMount
子mounted
子hook:mounted
父mounted
父 hook:mounted

更新时

父beforeUpdate
父hook:beforeUpdate
子beforeUpdate
子hook:beforeUpdate
子updated
子hook:updated
父updated
父hook:updated

组件摧毁时

父beforeDestroy
父hook:beforeDestroy
子beforeDestroy
子hook:beforeDestroy
子destroyed
子hook:destroyed
父destroyed
父hook:destroyed

以上内容涉及到vue父子组件生命周期执行顺序的知识,但对于@hook:xxx来说,在xxx执行后就会立即执行@hook:xxx

相关文章:

vue2 @hook 的解析与妙用

目录前言几种用法用法一 将放在多个生命周期的逻辑&#xff0c;统一到一个生命周期中用法二 监听子组件生命周期运行的情况运用场景场景一 许多时候&#xff0c;我们不得不在不同的生命周期中执行某些逻辑&#xff0c;并且这些逻辑会用到一些通用的变量&#xff0c;这些通用变量…...

网络技术|网络地址转换与IPv6|路由设计基础|4

对应讲义——p6 p7NAT例题例1解1例2解2例3解3例4解4一、IPv6地址用二进制格式表示128位的一个IPv6地址&#xff0c;按每16位为一个位段&#xff0c;划分为8个位段。若某个IPv6地址中出现多个连续的二进制0&#xff0c;可以通过压缩某个位段中的前导0来简化IPv6地址的表示。例如…...

MySQL运维知识

1 日志1.1 错误日志1.2 二进制日志查看二进制日志&#xff1a;mysqlbinlog ./binlog.000007purge master logs to binlog.000006reset mastershow variables like %binlog_expire_logs_seconds%默认二进制文件只存放30天&#xff0c;30天后会自动删除。1.3 查询日志1.4 慢查询日…...

易基因-MeRIP-seq揭示衰老和神经变性过程中m6A RNA甲基化修饰的保守下调机制

大家好&#xff0c;这里是专注表观组学十余年&#xff0c;领跑多组学科研服务的易基因。2023年02月22日&#xff0c;《美国国家科学院院刊》(Proc Natl Acad Sci USA)期刊发表了题为“Conserved reduction of m6A RNA modifications during aging and neurodegeneration is lin…...

暑期实习准备——Verilog手撕代码(持续更新中。。。

暑期实习准备——手撕代码牛客刷题笔记Verilog快速入门VL4 移位运算与乘法VL5 位拆分与运算VL6 多功能数据处理器VL8 使用generate…for语句简化代码VL9 使用子模块实现三输入数的大小比较VL11 4位数值比较器电路VL12 4bit超前进位加法器电路VL13 优先编码器电路①VL14 用优先编…...

Qt音视频开发19-vlc内核各种事件通知

一、前言 对于使用第三方的sdk库做开发&#xff0c;除了基本的操作函数接口外&#xff0c;还希望通过事件机制拿到消息通知&#xff0c;比如当前播放进度、音量值变化、静音变化、文件长度、播放结束等&#xff0c;有了这些才是完整的播放功能&#xff0c;在vlc中要拿到各种事…...

Linux基础命令-nice调整进程的优先级

文章目录 Nice 命令介绍 语法格式 常用参数 参考实例 1 调整bash的优先级为-10 2 调整脚本的优先级为6 3 调整指令的优先级 4 默认使用nice命令调整优先级 命令总结 Nice 命令介绍 nice命令的主要功能是用于调整进程的优先级&#xff0c;合理分配系统资源。Linux系…...

解析C语言strcmp()函数

函数名: strcmp 头文件&#xff1a; <string.h> 函数原型: int strcmp(const char *str1,const char *str2); 功 能: 比较两个字符串的大小&#xff0c;区分大小写 参 数&#xff1a; str1和str2为要比较的字符串 返回值&#xff1a; str1 > str2 , 返回 1&…...

初识scrapy

认识scrapyscrapy是一个为了爬取网站数据&#xff0c;提取结构性数据而编写的应用框架&#xff0c;我们只需实现少量的代码&#xff0c;就能实现数据的快速抓取scrapy使用了Twisted异步网络架构&#xff0c;可以加快下载速度 pip install twisted安装&#xff1a;pip install s…...

(JUC)核心线程 和 救急线程的区别;Executors-固定大小线程池单线程线程池

核心线程 和 救急线程的区别 救急线程是有个生存时间的&#xff0c;它执行完任务了&#xff0c;过了一段时间&#xff0c;没有新任务了&#xff0c;救急线程就会销毁掉&#xff0c;变成结束的状态 核心线程没有生存时间&#xff0c;它执行完任务后&#xff0c;它仍然会被保存…...

vue2的动画和过渡效果

文章目录过渡 & 动画Transition 组件基于 CSS 的过渡效果CSS 过渡类名 class为过渡效果命名CSS 过渡 transition实例1&#xff1a;实例2&#xff1a;CSS 动画自定义过渡的类名同时使用 transition 和 animation深层级过渡与显式过渡时长性能考量JavaScript 动画可复用过渡效…...

正数负数的取反运算推导过程

取反题目题目&#xff1a;数据常用位十进制数据举例 我们计算a 60的取反运算c~a 求c 引用的知识点知识点: 正数的反码 补码 都一样。 0的补码反码都一样 负数的反码&#xff0c;最高是标记符号位&#xff0c;其他位置1变0 1变0 负数的补码 反码1 步骤斜体样式本篇我们全用8位二…...

C语言 条件编译

目录 1. #if #elif #else #endif 2. #ifdef #else #endif 3. #ifndef #else #endif 4. 三者区别 根据不同情况编译不同代码、产生不同目标文件的机制&#xff0c;称为条件编译。 条件编译是预处理程序的功能&#xff0c;不是编译器的功能。 1. #if #elif #else #endif …...

Linux: ARM GIC只中断CPU 0问题分析

文章目录1. 前言2. 分析背景3. 问题4. 分析4.1 ARM GIC 中断芯片简介4.1.1 中断类型和分布4.1.2 拓扑结构4.2 问题根因4.2.1 设置GIC SPI 中断CPU亲和性4.2.2 GIC初始化&#xff1a;缺省的CPU亲和性4.2.2.1 boot CPU亲和性初始化流程4.2.2.1 其它非 boot CPU亲和性初始化流程5.…...

测试软件5

一 css基础 css定义&#xff1a;可以设置网页中的样式&#xff0c;外观&#xff0c;美化 css中文名字&#xff1a;级联样式表&#xff0c;层叠样式表&#xff0c;样式表 二 css基础语法 1.style标签写在title标签后面 2.选择器{属性名1&#xff1a;属性值1&#xff1b;属性名…...

前端JS内存管理

JS内存管理 内存原理&#xff1a; 任何变成语言在执行的时候都需要操作系统来分配内存&#xff0c;只是有些语言需要手动管理分配的内存有些语言有专门来管理内存的方式 如 JVM 了解以上的概念之后&#xff0c;我们再来了解一下大致的内存周期 分配需要的内存使用内存在不使用…...

第七章.集成学习(Ensemble Learning)—袋装(bagging),随机森林(Random Forest)

第七章.集成学习 (Ensemble Learning) 7.1 集成学习—袋装(bagging),随机森林(Random Forest) 集成学习就是组合多个学习器&#xff0c;最后得到一个更好的学习器。 1.常见的4种集成学习算法 个体学习器之间不存在强依赖关系&#xff0c;袋装&#xff08;bagging&#xff09;…...

Java_面向对象

Java_面向对象 1.面向对象概述 ​ 面向对象是一种符合人类思想习惯的编程思想。显示生活中存在各种形态的不同事物&#xff0c;这些食物存在着各种各样的联系。在程序中使用对象来映射现实中的事物&#xff0c;使用对象的关系来描述事物之间的关系&#xff0c;这种思想就是面…...

【IoT】智能烟雾报警器

设计简介 硬件设计由AT89C51单片机、DS18B20温度传感器、4位共阳数码管、电源模块、报警模块、按键模块、MQ-2烟雾检测模块和ADC0832模数转换模块组成。 烟雾传感器MQ-2检测空气中的烟雾气体&#xff0c;通过ADC0832进行数据转换&#xff0c;经过单片机的运算处理后在数码管上…...

Python实现定时执行脚本(5)

前言 本文是该专栏的第17篇,后面会持续分享python的各种干货知识,值得关注。 笔者在前面有详细介绍过几种使用python实现定时执行任务的方法,可以说都是简单易上手的那种。而本文,再来详细介绍另外一种定时方法,那就是利用任务框架APScheduler(advanceded python schedu…...

工业安全零事故的智能守护者:一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

从WWDC看苹果产品发展的规律

WWDC 是苹果公司一年一度面向全球开发者的盛会&#xff0c;其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具&#xff0c;对过去十年 WWDC 主题演讲内容进行了系统化分析&#xff0c;形成了这份…...

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

DAY 47

三、通道注意力 3.1 通道注意力的定义 # 新增&#xff1a;通道注意力模块&#xff08;SE模块&#xff09; class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

《用户共鸣指数(E)驱动品牌大模型种草:如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍,多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解(初学者版) 1. static(默认值) 2. relative(相对定位) 3. absolute(绝对定位) 4. fixed(固定定位) 5. sticky(粘性定位) 三、定位元素的层级关系(z-i…...

数据库分批入库

今天在工作中&#xff0c;遇到一个问题&#xff0c;就是分批查询的时候&#xff0c;由于批次过大导致出现了一些问题&#xff0c;一下是问题描述和解决方案&#xff1a; 示例&#xff1a; // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...

Spring数据访问模块设计

前面我们已经完成了IoC和web模块的设计&#xff0c;聪明的码友立马就知道了&#xff0c;该到数据访问模块了&#xff0c;要不就这俩玩个6啊&#xff0c;查库势在必行&#xff0c;至此&#xff0c;它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据&#xff08;数据库、No…...

学校时钟系统,标准考场时钟系统,AI亮相2025高考,赛思时钟系统为教育公平筑起“精准防线”

2025年#高考 将在近日拉开帷幕&#xff0c;#AI 监考一度冲上热搜。当AI深度融入高考&#xff0c;#时间同步 不再是辅助功能&#xff0c;而是决定AI监考系统成败的“生命线”。 AI亮相2025高考&#xff0c;40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕&#xff0c;江西、…...

使用Matplotlib创建炫酷的3D散点图:数据可视化的新维度

文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例(带样式)应用场景在数据科学和可视化领域,三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...