Vue如何优雅地进行事件解绑和解绑
使用vue的同学一定对事件的绑定和解绑再熟悉不过了,以开启scroll事件为例,我们一般的写法是这样的:export default {name: "test",data() {return {};},mounted() {window.addEventListener("scroll", this.scrollHanlder);},beforeDestroy() {window.removeEv
·
使用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>
更多推荐
已为社区贡献6条内容
所有评论(0)