前端开发——Vue程序化事件监听器

helloyangkl

已于 2023-02-17 09:07:17 修改

阅读量328

点赞数

分类专栏：前端 Vue 文章标签： vue.js 前端 javascript

于 2023-02-17 09:02:22 首次发布

本文链接：https://blog.csdn.net/helloyangkl/article/details/129078093

版权

Vue 同时被 2 个专栏收录

23 篇文章 1 订阅

订阅专栏

前端

15 篇文章 0 订阅

订阅专栏

程序化事件监听器

例如，在页面挂载时定义一个定时器，需要在页面销毁时清除定时器。这似乎不是问题。但仔细观察，this.timer 的唯一目的是能够在 beforeDestroy 中获取计时器编号，否则是无用的。

export default {
    mounted() {
        this.timer = setInterval(() => {
            console.log(Date.now())
        }, 1000)
    },
    beforeDestroy() {
        clearInterval(this.timer)
    }
}

如果可能，最好只访问生命周期挂钩。这不是一个严重的问题，但可以认为是混乱。我们可以通过使用或once 监听页面生命周期销毁来解决这个问题：

export default {
    mounted() {
        this.creatInterval( hello )
        this.creatInterval( world )
    },
    creatInterval(msg) {
        let timer = setInterval(() => {
            console.log(msg)
        }, 1000)
        this.$once( hook:beforeDestroy , function() {
            clearInterval(timer)
        })
    }
}

使用这种方法，即使我们同时创建多个定时器，也不影响效果。这是因为它们将在页面被销毁后以编程方式自动清除。