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

原创已于 2023-02-17 09:07:17 修改 · 429 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

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

Vue 同时被 2 个专栏收录

22 篇文章

订阅专栏

前端

16 篇文章

订阅专栏

博客介绍了在 Vue 中程序化事件监听器的相关内容。在页面挂载时定义定时器，需在页面销毁时清除。为避免混乱，可通过监听页面生命周期销毁来解决，使用该方法即使创建多个定时器，也能在页面销毁后自动清除。

程序化事件监听器

例如，在页面挂载时定义一个定时器，需要在页面销毁时清除定时器。这似乎不是问题。但仔细观察，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)
        })
    }
}

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