addeventlistener事件参数_Vue的钩子事件和程序化侦听
![](/assets/blank.gif)
对于Vue的事件机制,其实有一些高级技巧,我们最好能够掌握。
一、组件的生命周期钩子事件
Vue的生命周期函数,其实就是Vue开发者设定的一些hook钩子,你只要往hook里面编写代码,它就可以执行。如vue实例里的beforeCreate、created、mounted等,都是钩子。
但是你可能不知道,在Vue当中,触发钩子函数的时候,也会向父组件$emit
一个事件,称之为hookEvent
。
这个事件名叫做hook
,以冒号的形式给它提供参数,参数就是各个钩子函数的名称,如下面的例子所示:
<my-component @hook:mounted='doSomething'></my-component>
上面的代码要这么读
:当my-component
这个子组件执行到mounted
钩子函数时,会自动向父组件冒泡一个叫做hook:mounted
的事件,也就是this.$emit('hook:' + 'mounted')
,无论你是否在my-component
中编写了具体的mounted代码。
关于理解钩子事件,重要在于:
- 这是从子组件向父组件自动冒泡的事件
- 在父组件中捕获该事件并进行相应处理
- 这不是HTML元素标签级别的事件,而是组件级别的事件,不要在普通标签上使用它
源码分析
在Vue的官方文档中,找不到钩子事件相关的内容,但是我们可以从源码中进行分析:
下面是一段截取的Vue源码,注意callHook
函数:
vm._self = vm
initLifecycle(vm) // 初始化生命周期
initEvents(vm) // 初始化事件
initRender(vm)
callHook(vm, 'beforeCreate')
initInjections(vm) // resolve injections before data/props
initState(vm)
initProvide(vm) // resolve provide after data/props
callHook(vm, 'created')
可以看出,生命周期函数是通过callHook
这个函数调用的。我们去看看callHook
函数的源代码:
export function callHook (vm: Component, hook: string) {// #7573 disable dep collection when invoking lifecycle hookspushTarget()const handlers = vm.$options[hook] // 选项当中的生命周期函数const info = `${hook} hook`if (handlers) {for (let i = 0, j = handlers.length; i < j; i++) {invokeWithErrorHandling(handlers[i], vm, null, vm, info)}}if (vm._hasHookEvent) {vm.$emit('hook:' + hook)}popTarget()
}
下面这段,就是钩子事件的出处了:
if (vm._hasHookEvent) {vm.$emit('hook:' + hook)}
根据不同hook的具体名字(created、mounted等等),组合钩子事件的字符串名,然后emit。
钩子事件为我们控制和响应子组件的变化,提供了新的、便捷的手段。
二、程序化的事件侦听器
我们知道 $emit
冒泡的事件,可以被 v-on
指令侦听。但是,所有写在模板上的v-on
代码都是固定的,编译前就写好的,无法动态修改。这样不灵活,也满足不了所有的需求,我们需要类似编程语言能力的动态设置能力。
Vue很贴心的为我们提供了下面三个方法,让我们能够以程序化的方式侦听、停止事件:
$on(eventName, eventHandler)
:侦听一个事件$once(eventName, eventHandler)
:一次性侦听一个事件$off(eventName, eventHandler)
:停止侦听一个事件
那么程序化的事件处理有什么优点呢?
看下面的例子,假设你要集成一个第三方库,这个库的作用是将一个日期选择器附加到一个输入框上,然后在母组件被销毁之前,先把这个库的实例销毁了。最朴素的做法是在母组件的mounted钩子处自动挂载库实例,然后在beforeDestroy钩子处自动销毁库实例:
// 一次性将这个日期选择器附加到一个输入框上
// 它会被挂载到 DOM 上。
mounted: function () {// Pikaday 是一个第三方日期选择器的库this.picker = new Pikaday({field: this.$refs.input,format: 'YYYY-MM-DD'})
},// 在组件被销毁之前,
// 也销毁这个日期选择器。
beforeDestroy: function () {this.picker.destroy()
}
但是这么做有两个潜在的问题:
- 需要在这个组件实例中保存这个
picker
实例,如果可以的话最好只有生命周期钩子可以访问到它。虽然这并不算严重的问题,但是它可以被视为“杂物”。 - 创建库实例的代码独立于清理库实例的代码,这使得我们比较难于程序化地清理我们建立的所有东西。
解决问题的最佳办法是,钩子事件配合程序化的侦听器:
mounted: function () {var picker = new Pikaday({field: this.$refs.input,format: 'YYYY-MM-DD'})// 注意看这里this.$once('hook:beforeDestroy', function () {picker.destroy()})
}
$once
绑定的事件只能被执行一次,完美适合销毁场景。
使用了上面的策略,我甚至可以让不同的输入框元素使用不同的 Pikaday,每个新的实例都程序化地在后期清理它自己:
mounted: function () {this.attachDatepicker('startDateInput')this.attachDatepicker('endDateInput')
},
methods: {attachDatepicker: function (refName) {var picker = new Pikaday({field: this.$refs[refName],format: 'YYYY-MM-DD'})this.$once('hook:beforeDestroy', function () {picker.destroy()})}
}
实际上,对于上面的需求,更普遍更适合的方法还是抽象出一个可以复用的组件。
注意 Vue 的事件系统不同于浏览器的 EventTarget API。尽管它们工作起来是相似的,但是$emit
、$on
, 和$off
并不是dispatchEvent
、addEventListener
和removeEventListener
的别名。
更多内容请访问: https://www.liujiangblog.com
更多视频教程请访问: https://www.liujiangblog.com/video/
addeventlistener事件参数_Vue的钩子事件和程序化侦听相关推荐
- vue监听字符串长度_vue中的计算属性和侦听器
计算属性概念 模板内的候通现端数是制这.效合应近环大过这业据的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护在重说道.础过学开概码数项遍间里哦行览屏屏 ...
- Spring中的异步和事务性事件侦听器
内置的事件发布功能从Spring的早期版本开始存在,对于处理同一应用程序上下文中Spring组件之间的基本通信仍然有用. 通常,应用程序可以生成应用程序事件(可以是任意对象)并侦听它们. 整个机制非常 ...
- addeventlistener事件参数_从Chrome源码看浏览器的事件机制
在上一篇<从Chrome源码看浏览器如何构建DOM树>介绍了blink如何创建一棵DOM树,在这一篇将介绍事件机制. 上一篇还有一个地方未提及,那就是在构建完DOM之后,浏览器将会触发DO ...
- vue 点击事件传递多个参数_vue传事件参数
大家好,今天给大家分享的是vue传事件参数,希望大家喜欢. 在vue中传递事件参数还是比较常见的. 当然这种情况基本上是在html中标签中如何写这个问题上大家存在疑问. 那么这里我就分别举例说下. 1 ...
- vue click事件传参数_Vue框架之各种指令的使用
今天是刘小爱自学Java的第138天. 感谢你的观看,谢谢你. 学习计划安排如下: 昨天初步接触了2个指令,继续学其它指令. 这个指令数量有点多,有的一个指令还有多种用法,一次性全记下来显然不太现实, ...
- vue中 点击事件的写法_vue中的事件:原生事件与自定义事件__Vue.js
模板编译 processAttrs 对于ast attributes处理(v-on/@) 利用onRE与dirRE来捕获事件 这里最重要的就是dynamic的判断,vue中可以用动态参数来命名事件名称 ...
- jq 给节点node加事件_JavaScript 原生对象、属性、方法、事件、事件参数
/*** 事件参考 https://developer.mozilla.org/zh-CN/docs/Web/Events* Event <- UIEvent <- MouseEvent* ...
- JSX详解React的事件绑定事件参数的传递
一.认识JSX 这段element变量的声明右侧赋值的标签语法是什么呢? 它不是一段字符串(因为没有使用引号包裹),它看起来是一段HTML原生,但是我们能在js中直接给一个变量赋值html吗? 其实是 ...
- element 方法返回的boolean被当成字符串了_JavaScript 原生对象、属性、方法、事件、事件参数...
/*** 事件参考 https://developer.mozilla.org/zh-CN/docs/Web/Events* Event <- UIEvent <- MouseEvent* ...
最新文章
- 柔性生态布局未来,小鱼易连 2019“深耕视界逐梦小鱼”北京火爆招募
- 对话国际农民丰收节贸易会-林育庆:菲律宾谋定中国农业
- java五大原则_Java成长第五集--面向对象设计的五大原则
- hive表指定分区字段搜索_Spark SQL解析查询parquet格式Hive表获取分区字段和查询条件...
- js中函数的参数为函数的情况即回调函数
- vsftp虚拟用户无法上传文件,解决办法
- 如何使用War包部署Tomcat
- linux7系统如何配置网卡,Linux 7 配置网卡(nmcli)
- Windows系统带你一步一步无脑使用babel
- Web开发者必备:Web应用检查清单
- vue中axios设置表单头_VUE项目axios请求头更改Content-Type操作
- html 获取下一个兄弟节点,js jquery获取当前元素的兄弟级 上一个 下一个元素
- python 分类变量xgboost_用于可解释机器学习的四个Python库
- java lambda表达式详解_java8新特性-Lambda表达式的详解(从0开始)
- Mac 使用Quik Time Player为iPhone录屏后, iPhone状态条时间变为9:41
- ccc数据库的水平分割和垂直分割
- 用C#实现软件自动更新思路
- SIM868获取NTP时间
- 信息系统项目管理师知识记忆口诀
- 微信订阅消息(后端)教程
热门文章
- 锁屏界面显示某些设置已隐藏_iOS 14 隐藏功能,只要轻点手机背面就能截屏
- windows css,CSS (Windows) | Microsoft Docs
- mysql 移植ucos_基于STM32F767的UCOSIII移植学习
- oracle 批量 重建索引,Oracle重建索引Shell脚本、SQL脚本分享
- Debian10降级安装php,如何在Debian 10 Linux上安装PHP
- python google drive api_使用google-drive-api python获取文件的链接
- dp主机_HDMI和DP谁才是未来主流?
- MapReduce分析NCDC 年气象数据最低温度与最高温度
- 吴恩达《机器学习》学习笔记三——多变量线性回归
- 吴恩达作业3:利用深层神经网络实现小猫的分类