前端vue自学总结Week08- 实例方法篇之事件相关方法

阅读本书更多章节>>>>

与事件相关的方法有4个，分别是vm.$on,vm.$emit,vm.$off,vm.$once,它们是在eventsMixin函数中挂载到Vue原型上的

vm.$on

官方文档上给出的用法是vm.$on( event, callback )
event接收string或者数组类型的event
callback表示回调函数
作用是监听当前实例上的自定义事件，回调函数会接收所有传入事件触发函数的额外参数。
内部原理

$on方法接收两个参数，第一个参数是订阅的事件名，如果是数组则表示订阅多个事件，第二个参数是回调函数，当触发所订阅的事件时会执行这个回调函数。
首先，判断传入的事件名是否是一个数组，如果是数组，就表示需要一次性订阅多个事件，就遍历该数组，将数组中的每一个事件都递归调用$on方法将其作为单个事件订阅。
如果不是数组，则当作单个事件名来处理，以该事件命名为key。再到当前实例的_events属性中获取对应的事件列表，如果找不到就赋其为空数组，并将回调函数添加进去。
_events函数是生命周期初始化阶段的初始化事件initEvents函数中，给当前实例对象绑定了_events属性并给其赋值为空对象，_events属性就是用来当作当前实例的事件中心。

vm.$emit

官方文档上给出的用法是vm.$emit( eventName, […args] )
作用是触发当前实例的事件，附加参数都会传给监听器回调
内部原理

第一个参数eventName表示要触发的事件名，之后的附加参数都会传给被触发事件的回调函数。根据传入的事件名从当前实例的_events属性找到该事件对应的回调函数cbs，然后再传入附加参数args。

vm.$off

官方文档上给出的用法是vm.$off( [event, callback] )
作用是移除自定义的事件监听器，如果没有参数，则表示移除所有的监听器；如果只提供了事件，则表示只移除该事件对应的所以监听器；如果同时提供了事件和回调，则只移除这个回调对应的监听器；
内部原理

首先判断有没有传入参数，如果没有（代码中的arguments.length为0），则移除所有的事件监听器，因为当前实例上所有的事件都存储在事件中心_events属性中，所以只要将_events属性重新置为空对象即可；
再判断如果传入的事件是一个数组，则表示要一次性移除多个事件，则直接遍历该数组，然后将数组中的每个事件都调用off方法进行移除；
然后再找到需要移除事件名在事件中心对应的回调函数cbs，但是如果没有传入回调函数fn,则只需要把它对应的数组设置为null；如果既找到了cbs，又传入了回调函数，则只需要遍历回调函数数组cbs，如果cbs中某一项和fn相同，则将该项删除。

vm.$once

官方文档上给出的用法vm.$once( event, callback )
作用原理是监听一个自定义事件，但是只触发一次，一旦触发之后，监听器就会被移除
内部原理

在该函数中，先通过$on方法订阅事件，同时使用的回调函数不是原本的fn，而是子函数on,也就是当事件event被触发时，执行子函数on。
在on函数内部，先通过off方法移除所订阅的事件，这样可以保证事件不会被再次触发，接着执行原本的回调fn。

阅读本书更多章节>>>>

本文链接：https://www.kjpai.cn/gushi/2024-04-18/160079.html，文章来源：网络cs，作者：晨起，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！