前言

我们都知道Vue其实是一个基于原生的JavaScript封装的拥有MVVM模式的前端Web框架,在实际项目的开发过程中,在某些业务场景下我们需要使用原生js的方式来辅助我们达到开发目的。本篇我们来说说在Vue中使用原生Js监听事件时使用方式及问题。

选择钩子

首先在Vue中选择在那个生命周期函数内添加监听事件,一般在我们在mounted中去添加监听事件。因为在Vue页面渲染时,有多个状态,这里的mounted是指实例挂载后,可以对Dom进行操作,因为我们要对Dom进行操作,所以在mounted中添加是最合理的。

添加监听事件

一般我们可以对页面上的某个Dom或Window进行监听添加事件。

对某个Dom操作

首先我们需要先获取到具体的Dom节点,这里使用原生方式去获取Dom节点的方式有很多,

这里我使用document.querySelector()去获取节点,当然如果页面某些元素渲染有延迟,想要获取渲染完毕后的视图时,这里推荐在该操作前套一层$nextTick

然后我们将该Dom存于变量中,为该Dom添加监听事件,并添加自定义事件。

这里addEventListener有三个参数,element* .addEventListener(*event* , *function* , *useCapture* )

第一个type:String的事件名,当然这里的事件名应该都是标准的API,具体可以查阅HTML DOM 事件对象 | 菜鸟教程 (runoob.com)。第二个type:Function必传参数,是一个触发事件时执行的函数。第三个type:Boolean为可选参数,可以指定该事件的触发时机,指定事件是否在捕获或冒泡阶段执行。

针对window对象

如果我们需要针对window这个顶级对象监听的话,那反而简单了,直接以window作为Dom对象

加入防抖节流

在监听事件之后,防抖和节流是必不可少的性能优化项,关于防抖和节流可以自行去了解。如果这里推荐一款我们组大佬在用的第三方的js库,很多原生js的操作都进行了封装,基本拿来就用,Lodash 简介 | Lodash 中文文档 | Lodash 中文网 (lodashjs.com)

如何使用

安装

首先在项目中安装。

$ npm i -g npm
$ npm i --save lodash

导入

在需要使用的vue文件中引入

import debounce from 'lodash/debounce'

包裹Function

给第二个参数包裹debounce方法,并且设置一个时间。

window.addEventListener("resize",debounce(this.getWindowScreen,200));

移除监听

在添加监听后,应该选择时机去移除监听,我们一般选择Vue生命周期在实例销毁前beforeDestroy去移除监听。这里推荐两种删除方式。当然也是常用的。

未正确移除

在移除事件时碰到了没有正确的移除事件问题,首先移除的事件必须和添加的事件是同一个事件,这就相当于{name: '泰戈尔'} === {name: '泰戈尔'} 他们的结果是false。同样的,移除事件时也会出现这个问题。

所以在一开始添加监听事件时,就可以将监听事件用指定变量接收起来,这样在移除时就可以保证移除的事件和添加时是同一个。当然如果用新的变量来接收的话,需要在data定义并给一个默认值null。

在添加监听时就移除

在添加监听事件时,以通过hook监听组件选择在销毁钩子函数中移除事件

this.$once("hook:beforeDestroy", () => this.tableDom.removeEventListener('scroll',this.scrollY, true));//事件销毁

在钩子函数里移除

也可以选择在实例销毁前的钩子里选择移除

  beforeDestroy() {
    window.removeEventListener('resize', this.resetSize)
    window.removeEventListener('resize', this.debounceFun)
  }
最后修改:2021 年 10 月 15 日 09 : 40 AM
如果觉得我的文章对你有用,可以对我进行您主观即不限定金额大小的打赏。