Todos sabemos que si abre un temporizador y no lo cierra, seguirá ejecutándose, lo que consume mucho rendimiento, como se muestra en la siguiente figura: Solución 1: Este también es el método que usamos
normalmente
.
Primero defina el nombre del temporizador en la función de datos:
data() {
return {
timer: null,
};
},
Luego usa el temporizador así:
this.timer = setInterval(() => {
console.log(1);
}, 100);
Finalmente borre el temporizador en el ciclo de vida beforeDestroy():
beforeDestroy() {
clearInterval(this.timer);
},
No hay absolutamente ningún problema en escribir de esta manera, pero cuando usa muchos temporizadores en una página, encontrará que está un poco atascado, porque el temporizador variable en los datos se almacena en la instancia del componente el, preferiblemente solo el ciclo de vida puede acceder si es posible.
Además, cuando escribes mucho, tu ciclo de vida beforeDestroy será así:
Entonces la legibilidad de su código es muy pobre
Solución 2:
Este método es borrar el temporizador a través de la posición del detector de eventos $ una vez que se define el temporizador. Aquí está el código completo:
const timer = setInterval(() =>{
// 某些定时器操作
}, 100);
// 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
this.$once('hook:beforeDestroy', () => {
clearInterval(timer);
})
Al igual que otros componentes que deben usarse en la página actual y deben destruirse después de salir (como los componentes de algunas bibliotecas de terceros, etc.), este método puede usarse para resolver el problema de ejecutarse en segundo plano después partida.
En general, recomendamos usar la opción 2 para que el código sea más legible y claro de un vistazo.