VueUse useEventListener 解析

介绍

在组件挂载后用于addEventListener添加事件,卸载时removeEventListener移除事件。

使用

源码

实现这个功能不难,就是在 onMounted 生命周期中通过 addEventListener 添加事件,然后在onUnmounted 生命周期中 removeEventListener 移除事件。

平时使用的中还会遇到手动移除事件的情况,就需要 useEventListener 返回一个函数执行移除事件的操作。

我们可以进一步优化,addEventListener 其实还有第三个参数,第三个参数可以是一个对象,也可以是一个布尔值。

为对象时可用的配置参数如下:

  • capture:布尔值,事件捕获阶段触发。
  • once:布尔值,添加的事件函数只调用一次,被调用后自动移除。
  • passive:布尔值,表示该事件函数不会调用 preventDefault() 来阻止默认行为,一般用于性能优化上。
  • signal:AbortSignal 对象,该 AbortSignalabort 方法被调用时,监听器会被移除。

为布尔值时是设置该事件在捕获阶段触发。

因此 useEventListener 优化的点在于添加第三个参数配置 addEventListener

我们还可以把 vue 独特的响应式加入进来,也就是当 targetoptions 对象改变时会自动进行事件函数的重新绑定。

这里 watch 使用了 { immediate: true, flush: "post" }配置 immediate 是初始化就运行,而flush: "post" 是在组件渲染之后执行,这样能获取到目标DOM对象。

targetoptions 都是 Ref 对象,我们优化在 watch 回调函数中去 Ref 化。

这里有个问题 target 值改变触发 watch 后重新绑定事件函数,但 removeEvent 函数里面还是之前的 target 对象。

这里在进一步优化下在移除事件的时候在把 watch 监听也给移除掉。

我再扩展下 useEventListener 的功能支持绑定多个事件函数,并且支持参数 targetoptions 是一个有返回值的函数:

相关推荐
mldong2 小时前
你的 Vue3 项目也能有钉钉同款审批流设计器:npm 装包,10 分钟画出第一条审批流
前端·vue.js
2分钟速写快排3 小时前
什么是 RAG?如何用 RAG 实现一个用户记忆?
前端·后端·ai编程
passerby60614 小时前
如何自己造一个时间处理库
前端·javascript·github
走到天涯海角5 小时前
react里面的长列表渲染优化
前端·react.js·前端框架
小羊没烦恼!5 小时前
Hello Web API系列教程——Web API与国际化
java·服务器·前端·javascript·php
北岛贰5 小时前
迷茫焦虑期,我做了一个带支付带官网的 AI 聊天虚拟恋人 App
前端·人工智能·后端
mayaairi6 小时前
Vue2 组件通讯(三):全局事件总线、PubSub、插槽与组件实例属性
前端·javascript·vue.js
kyriewen7 小时前
面试官问我:AI 都能写代码了,前端凭什么还值 25K
前端·javascript·人工智能
风骏时光牛马8 小时前
AI源码分析:拆解模型底层实现逻辑
前端
BillKu8 小时前
全局样式变量:CSS 自定义属性(--border-color)和SCSS 变量($border-color)的说明
javascript·css·scss