IdentifiantMot de passe
Loading...
Mot de passe oubli� ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les r�ponses en temps r�el, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Fuite m�moire dans ce composant vuejs


Sujet :

JavaScript

Vue hybride

Message pr�c�dent Message pr�c�dent   Message suivant Message suivant
  1. #1
    Membre exp�riment� Avatar de Gobble
    Homme Profil pro
    Int�grateur Web
    Inscrit en
    Octobre 2014
    Messages
    100
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    �ge : 39
    Localisation : France, Essonne (�le de France)

    Informations professionnelles :
    Activit� : Int�grateur Web
    Secteur : High Tech - Produits et services t�l�com et Internet

    Informations forums :
    Inscription : Octobre 2014
    Messages : 100
    Par d�faut Fuite m�moire dans ce composant vuejs
    Bonjour,

    Voici un composant vuejs qui affiche une modal avec un gif quand on tape le konami code dans le navigateur (haut haut bas bas gauche droite gauche droite BA ENTER)

    Il y a une fuite m�moire dans ce code, quelqu'un pourrait m'�clairer ? Je crois que c'est li� au getElementById dans la m�thode handleKeydown. Mais j'aimerais bien une explication �clair�e.

    Code html : S�lectionner tout - Visualiser dans une fen�tre � part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    <template>
      <div id="myModal" class="modal">
        <div class="modal-content">
          <span class="close" @click="closeModal">&times;</span>
          <img alt="Hey" src="../assets/sold.gif">
          <p>{{ message }}</p>
        </div>
      </div>
    </template>
     
    <script>
    export default {
      name: "KonamiCode",
      data() {
        return {
          showGif: false,
          konamiCode: [38, 38, 40, 40, 37, 39, 37, 39, 66, 65, 13],
          enteredCode: [],
          modal:null,
          message: "Bravo pour avoir tapé le Konami Code Secret !"
        };
      },
      methods: {
        closeModal(){
          this.modal.style.display = "none";
        },
        handleKeydown(event) {
          this.enteredCode.push(event.keyCode);
          if (this.enteredCode.toString().indexOf(this.konamiCode) >= 0) {
            console.log("Konami Code entered!");
            this.showGif = true;
            this.modal = document.getElementById("myModal");
            this.modal.style.display = "block";
            this.enteredCode = [];
          }
        }
      },
      mounted() {
        window.addEventListener("keydown", this.handleKeydown);
      },
      beforeDestroy() {
        window.removeEventListener("keydown", this.handleKeydown);
      }
    }
    </script>
     
    <style scoped>
    img{
      margin:auto;
    }
    </style>

    En vous remerciant

  2. #2
    Membre exp�riment�
    Homme Profil pro
    D�veloppeur Web
    Inscrit en
    Juillet 2009
    Messages
    132
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activit� : D�veloppeur Web
    Secteur : High Tech - Op�rateur de t�l�communications

    Informations forums :
    Inscription : Juillet 2009
    Messages : 132
    Par d�faut
    Bonjour,

    Qu'est-ce qui te fais dire qu'il y a une fuite m�moire ?
    �ventuellement il pourrait y avoir un probl�me avec `enteredCode` si Vue garde des r�f�rences sur les items sachant que c'est un objet r�actif.

    D'ailleurs il n'y a pas besoin que `enteredCode` soit r�actif ici. Il est pr�f�rable dans ce cas de le sortir de `data` et l'initialiser dans le hook `created` :

    Code : S�lectionner tout - Visualiser dans une fen�tre � part
    1
    2
    3
    created() {
      this.enteredCode = [];
    }
    Pareil pour les autres propri�t�s dont le rendu du composant ne d�pend pas.

  3. #3
    Membre exp�riment� Avatar de Gobble
    Homme Profil pro
    Int�grateur Web
    Inscrit en
    Octobre 2014
    Messages
    100
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    �ge : 39
    Localisation : France, Essonne (�le de France)

    Informations professionnelles :
    Activit� : Int�grateur Web
    Secteur : High Tech - Produits et services t�l�com et Internet

    Informations forums :
    Inscription : Octobre 2014
    Messages : 100
    Par d�faut
    Qu'est-ce qui te fais dire qu'il y a une fuite m�moire ?
    Bonjour J�r�mieL,

    J'ai eu ce retour de fuite m�moire sur ce composant en livrant un mini projet vuejs pour un emploi.


    D'ailleurs il n'y a pas besoin que `enteredCode` soit r�actif ici. Il est pr�f�rable dans ce cas de le sortir de `data` et l'initialiser dans le hook `created` :
    Woops, bien vu,j'ai toujours pris pour habitude de d�finir mes donn�es m�me non r�actives dans le data du composant.

  4. #4
    Membre exp�riment�
    Homme Profil pro
    D�veloppeur Web
    Inscrit en
    Juillet 2009
    Messages
    132
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activit� : D�veloppeur Web
    Secteur : High Tech - Op�rateur de t�l�communications

    Informations forums :
    Inscription : Juillet 2009
    Messages : 132
    Par d�faut
    Citation Envoy� par Gobble Voir le message
    Bonjour J�r�mieL,
    J'ai eu ce retour de fuite m�moire sur ce composant en livrant un mini projet vuejs pour un emploi.
    Sans davantage d'explication ?
    Si c'est dans le cadre d'un test technique, ce serait logique que le recruteur s'attende � une fuite sur le listener, mais l� il est bien supprim� dans le `beforeDestroy` donc c'est �tonnant.

  5. #5
    Membre exp�riment� Avatar de Gobble
    Homme Profil pro
    Int�grateur Web
    Inscrit en
    Octobre 2014
    Messages
    100
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    �ge : 39
    Localisation : France, Essonne (�le de France)

    Informations professionnelles :
    Activit� : Int�grateur Web
    Secteur : High Tech - Produits et services t�l�com et Internet

    Informations forums :
    Inscription : Octobre 2014
    Messages : 100
    Par d�faut
    Et bien dans la liste des point positifs il est bien mentionn� la destruction du event listeners. Ensuite dans les points n�gatifs "Fuite de m�moire dans le konami code". mais je n'ai pas pu avoir + de d�tails.

  6. #6
    Expert confirm�
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 681
    D�tails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 681
    Par d�faut
    tant que le konami code n'est pas d�tect�, le tableau enteredCode stocke toutes les touches. est ce que c'est �a qui serait d�tect� comme une fuite m�moire th�orique ?
    je pr�cise "th�orique" parce que dans la pratique, je pense qu'il faudrait �crire un roman pendant plusieurs heures avant de commencer � saturer la m�moire avec �a.

Discussions similaires

  1. [OCI] Fuite m�moire dans libclntsh
    Par Adil BE dans le forum Interfaces de programmation
    R�ponses: 8
    Dernier message: 08/09/2009, 14h52
  2. Fuite m�moire dans une appli dev avec vc++6
    Par devconf77 dans le forum Windows
    R�ponses: 1
    Dernier message: 26/08/2008, 08h58
  3. fuite m�moire dans le JSP editor
    Par ChristopheH dans le forum Eclipse Java
    R�ponses: 0
    Dernier message: 18/04/2008, 17h20
  4. fuite m�moire dans un processus
    Par ryadh.naouar dans le forum POSIX
    R�ponses: 4
    Dernier message: 09/05/2007, 11h53
  5. R�ponses: 19
    Dernier message: 04/10/2006, 16h53

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo