介绍
在组件挂载后用于addEventListener添加事件,卸载时removeEventListener移除事件。
使用
源码
实现这个功能不难,就是在 onMounted
生命周期中通过 addEventListener
添加事件,然后在onUnmounted
生命周期中 removeEventListener
移除事件。
平时使用的中还会遇到手动移除事件的情况,就需要 useEventListener
返回一个函数执行移除事件的操作。
我们可以进一步优化,addEventListener
其实还有第三个参数,第三个参数可以是一个对象,也可以是一个布尔值。
为对象时可用的配置参数如下:
- capture:布尔值,事件捕获阶段触发。
- once:布尔值,添加的事件函数只调用一次,被调用后自动移除。
- passive:布尔值,表示该事件函数不会调用
preventDefault()
来阻止默认行为,一般用于性能优化上。 - signal:
AbortSignal
对象,该AbortSignal
的abort
方法被调用时,监听器会被移除。
为布尔值时是设置该事件在捕获阶段触发。
因此 useEventListener
优化的点在于添加第三个参数配置 addEventListener
。
我们还可以把 vue 独特的响应式加入进来,也就是当 target
和 options
对象改变时会自动进行事件函数的重新绑定。
这里 watch
使用了 { immediate: true, flush: "post" }
配置 immediate
是初始化就运行,而flush: "post"
是在组件渲染之后执行,这样能获取到目标DOM对象。
target
和 options
都是 Ref
对象,我们优化在 watch
回调函数中去 Ref
化。
这里有个问题 target
值改变触发 watch
后重新绑定事件函数,但 removeEvent
函数里面还是之前的 target
对象。
这里在进一步优化下在移除事件的时候在把 watch
监听也给移除掉。
我再扩展下 useEventListener
的功能支持绑定多个事件函数,并且支持参数 target
和 options
是一个有返回值的函数: