前言

我们都知道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 日
© 允许规范转载
如果觉得我的文章对你有用，可以对我进行您主观即不限定金额大小的打赏。