Vue如何优雅地进行事件解绑和解绑

使用vue的同学一定对事件的绑定和解绑再熟悉不过了，以开启scroll事件为例，我们一般的写法是这样的：

export default {name: "test",data() {return {};},mounted() {window.addEventListener("scroll", this.scrollHanlder);},beforeDestroy() {window.removeEventListener("scroll", this.scrollHanlder);},method: {scrollHanlder() {// todo something...},},
};
</script>

这样的写法是没有问题的，但是如果我们在mounted中进行了事件解绑，但是在beforeDestroy中忘记了事件解绑，问题就会变得很严重，导致项目运行久了之后变得卡顿和内存溢出。为了避免在beforeDestroy中忘记关闭资源，我们可以使用vue中的hook，将事件绑定和解绑写在一起，提高代码阅读性和减少bug的出现。写法如下：

export default {name: "test",data() {return {};},mounted() {window.addEventListener("scroll", this.scrollHanlder);// 使用$once和hook实现this.$once("hook:beforeDestroy", () => {window.removeEventListener("scroll", this.scrollHanlder);});},beforeDestroy() {},method: {scrollHanlder() {// todo something...},},
};
</script>

Vue如何优雅地进行事件解绑和解绑相关推荐

JS中事件的绑定和解绑
JS中事件的绑定和解绑一. 了解事件 1. 事件的三要素 2. 事件绑定分类 2-1. dem0级事件 2-2. dom2级事件二. 事件的绑定 1. dom0级事件 2. dom2级事件 ...
JS事件的绑定和解绑
/* 事件三要素 1.事件源:在谁的身上绑定事件 2.事件类型:什么事件 3.事件处理函数:当行为发生的时候,执行那一个函数 ==>div.οnclick=function(){} ==> ...
Vue之组件自定义事件的绑定和解绑
不知道小伙伴们还记不记得在用 Vue 构建 TodoList 案例的博客中,我们有涉及到要从子组件中把数据传递给父组件,当时我用的方法是,让父组件给子组件传递一个函数,然后子组件把要传过来的数据放在那 ...
11-jQuery的事件绑定和解绑
[转]11-jQuery的事件绑定和解绑 1.绑定事件语法: bind(type,data,fn) 描述:为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数. 参数解释: type ( ...
jQuery的事件绑定和解绑
1.绑定事件语法: bind(type,data,fn) 描述:为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数. 参数解释: type (String) : 事件类型 data ( ...
vue 自定义事件解绑
既然不用的话就解绑对于绑的谁就去谁那进行触发,解绑则也一样,去找它解绑在student组件里,this.$off('自定义事件名')但这适用于一个自定义事件的解绑解绑多个事件this.$off( ...
【JavaScript】事件绑定、事件解绑、常见事件类型、事件对象
文章目录事件认识事件事件绑定 - DOM 0级事件 - DOM 2级事件(事件侦听器事件监听) 事件解绑解绑dom0级事件解绑dom2级事件常见的事件类型 1. 鼠标事件 click ...
详解在vue项目当中绑定键盘事件
在vue项目当中,有时会遇到为文本输入框或者button按钮绑定键盘事件,最常见的就是enter回车事件. 按照vue官网给出的方法是: v-on:keyup.enter 简写: @keyup.ent ...
keep alive PHP,vue中keep-alive使用方法详解
这次给大家带来vue中keep-alive使用方法详解,vue中keep-alive使用的注意事项有哪些,下面就是实战案例,一起来看一下. 1.keep-alive的作用以及好处在做电商有关的项目中 ...
php动态写入vue,Vue自定义动态组件使用详解
这次给大家带来Vue自定义动态组件使用详解,Vue自定义动态组件的注意事项有哪些,下面就是实战案例,一起来看一下. 现在基于vue的UI组件库有很多,比如iview,element-ui等.但有时候这 ...

Vue如何优雅地进行事件解绑和解绑

Vue如何优雅地进行事件解绑和解绑相关推荐

最新文章

热门文章