前言
我们都知道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)
}
4 条评论
......懵逼中 滴!学生卡!打卡时间:下午8:16:50,请上车的乘客系好安全带~
啊这
我以后搞安全,可能需要涉猎前端吧。。。
可能会涉及到前端。