Vue.js
Crochets de cycle de vie

Crochets pour Vue 1.x

• init

  Appelé de manière synchrone après l'initialisation de l'instance et avant toute observation de données initiale.

• created

  Appelé de manière synchrone après la création de l'instance. Cela se produit avant l'installation de $el , mais après data observation , computed properties , watch/event callbacks et les methods ont été configurés.

• beforeCompile

  Immédiatement avant la compilation de l'instance de Vue.

• compiled

  Immédiatement après la compilation est terminée. Toutes les directives sont liées mais toujours avant que $el soit disponible.

• ready

  Se produit après la compilation et que $el sont terminés et que l'instance est injectée dans le DOM pour la première fois.

• attached

  Se produit lorsque $el est attaché au DOM par une directive ou un appel d'instance $appendTo() .

• detached

  Appelé lorsque $el est supprimé / détaché du DOM ou de la méthode d'instance.

• beforeDestroy

  Immédiatement avant que l'instance de Vue ne soit détruite, mais reste totalement fonctionnelle.

• destroyed

  Appelé après la destruction d'une instance. Toutes les bindings et directives ont déjà été non liées et les instances enfants ont également été détruites.

Utiliser dans une instance

Étant donné que tous les crochets du cycle de vie dans Vue.js ne sont que des functions , vous pouvez placer l' un d'eux directement dans la declaraction instance.

//JS
new Vue({

    el: '#example',

    data: {
        ...
    },

    methods: {
        ...
    },

    //LIFECYCLE HOOK HANDLING
    created: function() {
        ...
    },

    ready: function() {
        ...
    }

});

Pièges courants: Accès à DOM depuis le hook `ready ()`

Une des utilisations courantes du hook ready() est d’accéder au DOM, par exemple pour lancer un plugin Javascript, obtenir les dimensions d’un élément, etc.

Le problème

En raison du mécanisme de mise à jour DOM asynchrone de Vue, il n'est pas garanti que le DOM ait été entièrement mis à jour lorsque le hook ready() est appelé. Cela entraîne généralement une erreur car l'élément n'est pas défini.

La solution

Pour cette situation, la méthode d'instance $nextTick() peut aider. Cette méthode diffère l'exécution de la fonction de rappel fournie jusqu'à la prochaine coche, ce qui signifie qu'elle est déclenchée lorsque toutes les mises à jour du DOM sont garanties.

Exemple:

module.exports {
  ready: function () {
    $('.cool-input').initiateCoolPlugin() //fails, because element is not in DOM yet.
    
    this.$nextTick(function() {
      $('.cool-input').initiateCoolPlugin() // this will work because it will be executed after the DOM update.
    })
  }
}