Comment supprimer la surveillance lorsque Vue ferme la page

Dans le processus de développement d'applications Web à l'aide de Vue.js, il est souvent nécessaire d'ajouter des écouteurs aux composants pour capturer les opérations des utilisateurs en temps réel et les mettre à jour en fonction des commentaires. Cependant, ces écouteurs restent actifs lorsque l'utilisateur quitte la page ou ferme la page, ce qui peut entraîner des requêtes inutiles ou des mises à jour de données lorsqu'il quitte la page. Afin de résoudre ce problème, nous devons supprimer ces écouteurs lorsque le composant est détruit afin de protéger la stabilité et les performances de notre application.

Vue.js fournit une propriété appelée détruit, qui effectuera les opérations correspondantes lorsque le composant est détruit. Nous pouvons supprimer l'écouteur ajouté dans cette méthode. Jetons un coup d'œil au processus de mise en œuvre spécifique.

Tout d'abord, ajouter un écouteur dans Vue.js est très simple, il suffit d'utiliser la méthode $on. Par exemple, ajoutez un écouteur dans le cycle de vie créé() du composant :

created() {
    window.addEventListener('scroll', this.handleScroll)
},

Cet écouteur sera appelé lorsque l'utilisateur fera défiler la page du navigateur, puis exécutera la méthode handleScroll dans le composant.

Lorsque nous devons supprimer cet écouteur lorsque la page est détruite, nous pouvons utiliser le hook détruit de Vue, comme indiqué ci-dessous :

destroyed() {
    window.removeEventListener('scroll', this.handleScroll)
},

De cette façon, lorsque l'utilisateur quitte cette page, l'écouteur sera automatiquement supprimé, ce qui garantit les performances de l'application. et la stabilité.

En plus d'ajouter et de supprimer des auditeurs dans Vue.js, nous pouvons également utiliser des bibliothèques tierces pour simplifier ce processus. Par exemple, pour les événements de défilement utilisateur, nous pouvons utiliser la méthode throttle dans la bibliothèque throttle-debounce pour réduire les requêtes réseau inutiles :

import { throttle } from 'throttle-debounce'

created() {
    window.addEventListener('scroll', throttle(250, this.handleScroll))
},

destroyed() {
    window.removeEventListener('scroll', throttle(250, this.handleScroll))
},

Cette méthode limitera l'intervalle d'exécution de la méthode handleScroll à 250 ms, réduisant ainsi la fréquence des requêtes réseau. Les performances des applications sont garanties.

En résumé, lorsque nous utilisons Vue.js pour développer des applications Web, nous devons garantir les performances et la stabilité de l'application. Afin d'éviter les requêtes réseau inutiles ou les mises à jour de données lorsque l'utilisateur quitte la page, nous devons supprimer les écouteurs inutiles lorsque le composant est détruit. En utilisant le hook détruit ou la bibliothèque tierce fournie par Vue, nous pouvons rapidement ajouter et supprimer des écouteurs pour maintenir l'efficacité de notre application.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!