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

@hook扩展分析

初遇

问题是由一个面试题而来,
父组件可以监听到子组件的生命周期吗?
以上需要手动通过 $emit 触发父组件的事件,更简单的方式可以在父组件引用子组件时通过 @hook 来监听即可,如下所示:

 //  Parent.vue
 <Child @hook:mounted="doSomething" ></Child>
  doSomething() {
    console.log('父组件监听到 mounted 钩子函数 ...'); 
},
   //  Child.vue mounted(){ 
   console.log('子组件触发 mounted 钩子函数 ...');
 }, 
  // 以上输出顺序为:
  // 子组件触发 mounted 钩子函数 ...
 // 父组件监听到 mounted 钩子函数 ...   

当然 @hook 方法不仅仅是可以监听 mounted,其它的生命周期事件,例如:created,updated 等都可以监听。

应用

$emit 触发父组件

清除定时器

之前清除大屏定时器直接是beforeDestroy clearInterval,可以用更好的办法↓

export default{
  methods:{
    fun1(){
      let timer = setInterval(()=>{
      	//需要做的事情
         console.log(11111);
      },1000);
      this.$once('hook:beforeDestroy',()=>{
        clearInterval(timer);
        timer = null;
      })
    }
  }
}
服了,在查阅资料时,其他作者把beforeDestroy写成beforeDestory,以为写代码方式不对查半天

下面的用法有2个问题
1、vue实例中需要有这个定时器的实例,感觉有点多余;
2、 创建的定时器代码和销毁定时器的代码没有放在一起,通常很容易忘记去清理这个定时器,不容易维护;
export default{
  data(){
    timer:null  
  },
  this.timer = setInterval(()=>{
  //需要做的事情
},1000)beforeDestory(){
    clearInterval(this.timer);
    this.timer = null;
  }
}

题外
特殊情况时以上均失效不可用时,我这里采用监听路由变化进而清除定时器

watch: {
	//监听路由
	$route:{
		handler(oldVal,newVal){// 此处判断当前页面路由是否为指定路由,是则创建定时器,否则清除定时器,用在单页面
			if (oldVal.path != '/xx/xx/xx') {
				clearInterval(this.timer)
				this.timer = null
			} else {
				this.Init();
				this.timer = setInterval(() => {
					this.Init();
				}, 1000 * 30)
			}
		},
	    deep:true, // 深度监听
	    immediate: true // 使监听在页面加载完成后执行,避免数据无变化或初进页面时监听不执行          
    }
},

(扩展)Vue 的父组件和子组件生命周期钩子函数执行顺序?

Vue 的父组件和子组件生命周期钩子函数执行顺序可以归类为以下 4 部分:

  • 加载渲染过程
    父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted
  • 子组件更新过程
    父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated
  • 销毁过程
    父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

相关文章:

  • 利用 zabbix 监控服务端口
  • FastAPI 学习之路(二十九)使用(哈希)密码和 JWT Bearer 令牌的 OAuth2
  • 【愚公系列】2022年08月 微信小程序-纵向和横向选项卡功能实现
  • 猿创征文|Java实现自定义注解
  • 全网唯一OpenCyphal/UAVCAN教程(8)libcanard介绍
  • Redis的主从复制搭建
  • java毕业设计物资租赁管理系统mybatis+源码+调试部署+系统+数据库+lw
  • java计算机毕业设计评标专家管理信息系统源码+数据库+系统+lw文档+mybatis+运行部署
  • java毕业设计希望酒店信息管理系统mybatis+源码+调试部署+系统+数据库+lw
  • 数仓项目拉链表
  • 如何写砸一本小说
  • java计算机毕业设计企业运营管理系统的设计与实现源码+数据库+系统+lw文档+mybatis+运行部署
  • AWS灾难恢复的重要参考指标
  • java基于springboot+vue的课程资源在线学习网站
  • 998. 最大二叉树 II(难度:中等)
  • [ JavaScript ] 数据结构与算法 —— 链表
  • iOS 颜色设置看我就够了
  • JSDuck 与 AngularJS 融合技巧
  • Nodejs和JavaWeb协助开发
  • Vue.js-Day01
  • Vue全家桶实现一个Web App
  • 编写高质量JavaScript代码之并发
  • 动态规划入门(以爬楼梯为例)
  • 基于Dubbo+ZooKeeper的分布式服务的实现
  • 使用 5W1H 写出高可读的 Git Commit Message
  • PostgreSQL 快速给指定表每个字段创建索引 - 1
  • SAP CRM里Lead通过工作流自动创建Opportunity的原理讲解 ...
  • #Js篇:单线程模式同步任务异步任务任务队列事件循环setTimeout() setInterval()
  • (+4)2.2UML建模图
  • (10)STL算法之搜索(二) 二分查找
  • (二开)Flink 修改源码拓展 SQL 语法
  • (亲测有效)解决windows11无法使用1500000波特率的问题
  • (原)本想说脏话,奈何已放下
  • (原創) 物件導向與老子思想 (OO)
  • (转)fock函数详解
  • (轉貼) 寄發紅帖基本原則(教育部禮儀司頒布) (雜項)
  • .chm格式文件如何阅读
  • .net 4.0发布后不能正常显示图片问题
  • .NET CLR基本术语
  • @reference注解_Dubbo配置参考手册之dubbo:reference
  • [ C++ ] 继承
  • [ 隧道技术 ] 反弹shell的集中常见方式(四)python反弹shell
  • [2023-年度总结]凡是过往,皆为序章
  • [AAuto]给百宝箱增加娱乐功能
  • [Angular 基础] - 表单:响应式表单
  • [BUUCTF]-PWN:[极客大挑战 2019]Not Bad解析
  • [C++基础]-入门知识
  • [CSS] - 修正IE6不支持position:fixed的bug
  • [Docker]十一.Docker Swarm集群raft算法,Docker Swarm Web管理工具
  • [exgcd] Jzoj P1158 荒岛野人
  • [Firefly-Linux] RK3568 pca9555芯片驱动详解
  • [LeetCode] 93. Restore IP Addresses 复原IP地址
  • [linux] 创建用户
  • [linux]centos7下解决yum install mysql-server没有可用包
  • [Luogu P3527BZOJ 2527][Poi2011]Meteors(整体二分+BIT)