Die High-Level-Methode zum Löschen des Timers in vue

Programmatische Ereignis-Listener

Wenn beispielsweise ein Timer definiert wird, wenn die Seite bereitgestellt wird, muss der Timer gelöscht werden, wenn die Seite zerstört wird. Das sieht gut aus. Aber wenn Sie genauer hinschauen, ist this.timerdie einzige Funktion von beforeDestroy, die Timer-Seriennummer in zu bekommen, und es hat keinen anderen Nutzen als das.

// vue2 代码中
export default {
    
    
	data() {
    
    
		return {
    
    
			timer: null,
		}
	},
	// 挂载
    mounted() {
    
    
        this.timer = setInterval(() => {
    
    
            console.log('a')
        }, 1000)
    },
    // 消亡
    beforeDestroy() {
    
    
        clearInterval(this.timer)
    }
}

Vorzugsweise sollten möglichst nur Lebenszyklus-Hooks Zugriff darauf haben. Es ist kein ernsthaftes Problem, aber es kann als Trümmer angesehen werden.

Wir $onkönnen $oncedieses Problem lösen, indem wir die Zerstörung des Seitenlebenszyklus überwachen oder:

export default {
    
    
    mounted() {
    
    
        this.creatInterval('a')
        this.creatInterval('b')
    },
    creatInterval(msg) {
    
    
        let timer = setInterval(() => {
    
    
            console.log(msg)
        }, 1000)
        // 监听消亡周期，定时器清除
        this.$once('hook:beforeDestroy', function() {
    
    
            clearInterval(timer)
        })
    }
}

Nachdem Sie diese Methode verwendet haben, wird der Effekt nicht beeinträchtigt, selbst wenn wir mehrere Timer gleichzeitig erstellen. Weil sie automatisch programmgesteuert gelöscht werden, nachdem die Seite zerstört wurde, und keine Speicherverluste verursachen.