Comment fermer le composant externe de vue

Vue.js est un framework évolutif qui vous permet de créer facilement des composants réutilisables en combinant diverses fonctionnalités. Les composants Vue communs sont généralement ouverts lors d'une sorte d'interaction, mais ils doivent parfois également être fermés sous certaines conditions. Cet article expliquera comment désactiver la surveillance des événements, les minuteries, les requêtes ajax et d'autres ressources en dehors des composants dans Vue pour éviter les fuites de mémoire et améliorer les performances des applications.

1. Écoute d'événements

Lorsqu'un composant est chargé, il ajoute souvent des écouteurs d'événements afin qu'il puisse répondre à diverses opérations de l'utilisateur pendant l'interaction. Si ces écouteurs d'événements ne sont pas supprimés à temps, des fuites de mémoire se produiront, entraînant un ralentissement de l'application, voire un crash.

Solution : avant que le composant ne soit détruit, tous les écouteurs d'événements du composant doivent être supprimés. Vous pouvez effectuer les opérations suivantes dans la fonction hook beforeDestroy du composant :

beforeDestroy() {
  window.removeEventListener('scroll', this.handleScroll);
  element.removeEventListener('click', this.handleClick);
}

Le code ci-dessus supprimera l'événement scroll et les écouteurs d'événement click avant que le composant ne soit détruit afin qu'ils n'occupent plus la mémoire.

2. Timer

Timer est un autre problème courant qui provoque des fuites de mémoire. Un scénario courant est qu'un minuteur est créé lorsqu'un composant est chargé, mais si le composant est déchargé avant d'être détruit, le minuteur continuera à s'exécuter et à occuper de la mémoire.

Solution : toutes les minuteries doivent être effacées avant que le composant ne soit détruit. Vous pouvez effectuer les opérations suivantes dans la fonction hook beforeDestroy du composant :

beforeDestroy() {
  clearInterval(this.timer);
}

Le code ci-dessus effacera tous les minuteurs avant que le composant ne soit détruit afin qu'ils n'occupent plus de mémoire.

3. Requête Ajax

La requête Ajax est une opération asynchrone très courante. Si un composant crée une requête Ajax et n'y met pas fin avant que le composant ne soit détruit, la requête continuera à occuper la mémoire.

Solution : toutes les requêtes Ajax en attente doivent être annulées avant que le composant ne soit détruit. Pour y parvenir, vous pouvez encapsuler toutes les requêtes Ajax dans Promise et annuler la requête à l'aide de la fonction CancelToken fournie par axios. Lorsque le composant est détruit, annulez toutes les demandes en attente sous le composant.

// 封装成Promise
const get = (url, data) => {
  return new Promise((resolve, reject) => {
    axios.get(url, {
      params: data,
      cancelToken: new axios.CancelToken(function(cancel) {
        // 将cancel存储在请求列表中
        requestList.push({ cancel });
      })
    })
    .then(res => {
      resolve(res.data);
    })
    .catch(err => {
      reject(err);
    });
  });
}

// 取消封装的请求
beforeDestroy() {
  // 取消所有未完成的请求
  requestList.forEach(item => item.cancel());
  // 清空取消列表
  requestList = [];
}

Le code ci-dessus encapsule chaque demande dans une promesse et la stocke dans la liste des demandes afin qu'elle puisse être annulée. Dans la fonction hook de destruction de composants, appelez la fonction d'annulation de chaque requête pour annuler toutes les requêtes en attente.

Libérer des ressources dans Vue est très important non seulement pour éviter les fuites de mémoire mais aussi pour améliorer les performances de votre application. Si votre composant a ajouté des écouteurs d'événements, des minuteurs ou des requêtes Ajax, pensez à libérer ces ressources lors de la fermeture du composant.

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!