前端开发——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)
        })
    }
}

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