One place for hosting & domains

      Grundlegendes zu Vue.js Lifecycle Hooks


      Einführung

      Lifecycle Hooks bieten einen Einblick in die Funktionsweise der von Ihnen verwendeten Bibliothek hinter den Kulissen. Mithilfe von Lifecycle Hooks können Sie feststellen, wann Ihre Komponente erstellt, dem DOM hinzugefügt, aktualisiert oder zerstört wird.

      Dieses Diagramm aus der offiziellen Vue.js-Dokumentation erfasst den Vue.js Instance-Lifecycle:

      Vue.js Instance-Lifecycle-Diagramm ansehen

      Dieser Artikel führt Sie in die Erstellung, Montage, Aktualisierung und Zerstörung von Hooks ein.

      Grundlegendes zu Creation Hooks (Initialisierung)

      Creation Hooks sind die allerersten Hooks, die in Ihrer Komponente ausgeführt werden. Mit ihnen können Sie Aktionen ausführen, bevor Ihre Komponente überhaupt zum DOM hinzugefügt wurde. Im Gegensatz zu allen anderen Hooks werden Creation Hooks auch beim serverseitigen Rendern ausgeführt.

      Verwenden Sie Creation Hooks, wenn Sie Dinge in Ihrer Komponente einrichten müssen, sowohl beim Client-Rendering als auch beim Server-Rendering.

      Sie haben keinen Zugriff auf DOM oder das Zielmontageelement (this.$el) innerhalb der Creation Hooks.

      beforeCreate

      Der beforeCreate Hook wird bei der Initialisierung Ihrer Komponente ausgeführt. Daten wurden nicht reaktiv gemacht und Ereignisse wurden noch nicht eingerichtet:

      ExampleComponent.vue

      <script>
      export default {
        beforeCreate() {
          console.log('At this point, events and lifecycle have been initialized.')
        }
      }
      </script>
      

      In diesem Beispiel protokolliert dieser Snippet die Nachricht, wenn der beforeCreate-Hook ausgeführt wird: Zu diesem Zeitpunkt werden Ereignisse und Lebenszyklus initialisiert.

      erstellt

      Sie können auf reaktive Daten und Ereignisse zugreifen, die mit dem erstellten Hook aktiv sind. Vorlagen und Virtual DOM wurden noch nicht montiert oder zurückgegeben:

      ExampleComponent.vue

      <template>
        <div ref="example-element">{{ propertyComputed }}</div>
      </template>
      
      <script>
      export default {
        data() {
          return {
            property: 'Example property.'
          }
        },
      
        computed: {
          propertyComputed() {
            return this.property
          }
        },
      
        created() {
          console.log('At this point, this.property is now reactive and propertyComputed will update.')
          this.property = 'Example property updated.'
        }
      }
      </script>
      

      In diesem Beispiel speichert der Snippet Eigenschaft als Beispieleigenschaft. Wenn der erstellte Hook ausgeführt wird, wird eine Nachricht von An diesem Punkt ist diese.Eigenschaft nun reaktiv und propertyComputed wird aktualisiert, protokolliert. Und dann wird die Eigenschaft in Beispieleigenschaft aktualisiert geändert.

      Später im Lebenszyklus wird {{ propertyComputed }} als Beispieleigenschaft aktualisiert anstelle von Beispieleigenschaft angezeigt.

      In diesem Schritt haben Sie einige Beispiele für Creation Hooks überprüft und sind bereit, zum nächsten Teil des Lebenszyklus zu wechseln, die Mounting Hooks.

      Grundlegendes zu Mounting Hooks (DOM-Eingabe)

      Mounting Hooks sind die am häufigsten verwendeten Hooks. Sie ermöglichen es Ihnen, sofort vor und nach dem ersten Rendern auf Ihre Komponente zuzugreifen. Sie werden jedoch nicht während des serverseitigen Renderings ausgeführt.

      Verwenden Sie Mounting Hooks, wenn Sie auf das DOM Ihrer Komponente sofort vor oder nach dem ersten Rendern zugreifen oder es ändern müssen.

      Verwenden Sie keine Mounting Hooks, wenn Sie Daten für Ihre Komponente bei der Initialisierung abrufen müssen.

      Hinweis: Verwenden Sie stattdessen erstellt (oder erstellt und aktiviert für Komponenten, die am Leben gehalten werden sollen). Besonders, wenn Sie diese Daten während des serverseitigen Renderings benötigen.

      beforeMount

      Der beforeMount Hook wird direkt vor dem ersten Rendering ausgeführt und nachdem die Vorlage oder Renderfunktionen kompiliert wurden:

      ExampleComponent.vue

      <script>
      export default {
        beforeMount() {
          console.log(`At this point, vm.$el has not been created yet.`)
        }
      }
      </script>
      

      In diesem Beispiel protokolliert dieser Snippet bei der Ausführung des beforeMount Hook die Nachricht: Zu diesem Zeitpunkt wurde vm.$el noch nicht erstellt.

      montiert

      Im montierten Hook haben Sie vollen Zugriff auf die reaktive Komponente, die Vorlagen und das zurückgegebene DOM (über this.$el).

      Verwenden Sie zur Änderung des DOM montiert – insbesondere bei der Integration von nicht-Vue-Bibliotheken:

      ExampleComponent.vue

      <template>
        <div ref="example-element">Example component.</div>
      </template>
      
      <script>
      export default {
        mounted() {
          console.log(`At this point, vm.$el has been created and el has been replaced.`);
          console.log(this.$el.textContent) // Example component.
        }
      }
      </script>
      

      In diesem Beispiel protokolliert dieser Snippet die Nachricht, wenn der montierte Hook ausgeführt wird Zu diesem Zeitpunkt wurde vm.$el erstellt und el ersetzt. Außerdem wird eine Nachricht von Beispielinhalt. (this.$el.textContent) protokolliert.

      In diesem Abschnitt haben Sie Anwendungsfälle für Mounting Hooks erkundet. Im nächsten Schritt überprüfen Sie einige Beispiele, die Updating Hooks verwenden.

      Grundlegendes zu Updating Hooks (Diff & Re-render)

      Updating Hooks werden aufgerufen, wenn eine reaktive Eigenschaft, die von Ihrer Komponente verwendet wird, sich ändert oder etwas anderes ein erneutes Rendering verursacht. Sie ermöglichen es Ihnen, den Zyklus watch-compute-render für Ihre Komponente zu haken.

      Verwenden Sie Updating Hooks, wenn Sie wissen müssen, wann Ihre Komponente neu gerendert wird, z. B. für das Debuggen oder das Profiling.

      Verwenden Sie die Updating Hooks nicht, wenn Sie wissen müssen, wann sich eine reaktive Eigenschaft auf Ihrer Komponente ändert. Verwenden Sie stattdessen computed Eigenschaften oder Watchers.

      beforeUpdate

      Der beforeUpdate Hook wird nach Datenänderungen Ihrer Komponente ausgeführt und der Update-Zyklus beginnt, unmittelbar bevor das DOM gepatcht und neu gerendert wird.

      Verwenden Sie beforeUpdate, wenn Sie den neuen Status aller reaktiven Daten auf Ihrer Komponente erhalten müssen, bevor sie tatsächlich zurückgegeben wird:

      ExampleComponent.vue

      <template>
        <div ref="example-element">{{counter}}</div>
      </template>
      
      <script>
      export default {
        data() {
          return {
            counter: 0
          }
        },
      
        created() {
          setInterval(() => {
            this.counter++
          }, 1000)
        },
      
        beforeUpdate() {
          console.log(`At this point, Virtual DOM has not re-rendered or patched yet.`)
          // Logs the counter value every second, before the DOM updates.
          console.log(this.counter)
        }
      }
      </script>
      

      Zuerst speichert dieser Snippet Zähler als 0. Wenn der erstellte Hook ausgeführt wird, wird er den Zähler alle 1000 ms erhöhen. Wenn der beforeUpdate-Hook ausgeführt wird, protokolliert dieses Snippet die Nachricht: Zu diesem Zeitpunkt hat Virtual DOM noch nicht neu gerendert oder gepatcht. Eine Zahl für Zähler wird protokolliert.

      aktualisiert

      Der aktualisierte Hook wird nach Datenänderungen Ihrer Komponente und den Neu-Renderings des DOM ausgeführt.

      Verwenden Sie aktualisiert, wenn Sie nach einer Eigenschaftsänderung auf DOM zugreifen müssen:

      ExampleComponent.vue

      <template>
        <div ref="example-element">{{counter}}</div>
      </template>
      
      <script>
      export default {
        data() {
          return {
            counter: 0
          }
        },
      
        created() {
          setInterval(() => {
            this.counter++
          }, 1000)
        },
      
        updated() {
          console.log(`At this point, Virtual DOM has re-rendered and patched.`)
          // Fired every second, should always be true
          console.log(+this.$refs['example-element'].textContent === this.counter)
        }
      }
      </script>
      

      Zuerst speichert dieser Snippet Zähler als 0. Wenn der erstellte Hook ausgeführt wird, wird er den Zähler alle 1000 ms erhöhen. Wenn der aktualisierte Hook ausgeführt wird, protokolliert dieses Snippet die Nachricht: Zu diesem Zeitpunkt hat Virtual DOM erneut gerendert und gepatcht. und ein boolescher Wert von wahr wird protokolliert, da der gerenderte Wert und der aktuelle Wert gleich sind.

      Nachdem Sie nun die Verwendung der Updating Hooks kennengelernt haben, sind Sie bereit, mehr über Destruction Hooks zu erfahren.

      Grundlegendes zu Destruction Hooks (Teardown)

      Destruction Hooks ermöglichen Ihnen, Aktionen durchzuführen, wenn Ihre Komponente zerstört wird, wie das Übergeben von Analysen und Bereinigungen. Sie werden abgegeben, wenn Ihre Komponente zerstört und aus DOM entfernt wird.

      beforeDestroy

      beforeDestroy wird direkt vor dem Löschen abgegeben. Ihre Komponente wird immer noch vollständig vorhanden und funktionell sein.

      Verwenden Sie beforeDestroy, wenn Sie Ereignisse oder reaktive Abonnements löschen müssen:

      ExampleComponent.vue

      <script>
      export default {
        data() {
          return {
            exampleLeakyProperty: 'This represents a property that will leak memory if not cleaned up.'
          }
        },
      
        beforeDestroy() {
          console.log(`At this point, watchers, child components, and event listeners have not been teared down yet.`)
          // Perform the teardown procedure for exampleLeakyProperty.
          // (In this case, effectively nothing)
          this.exampleLeakyProperty = null
          delete this.exampleLeakyProperty
        }
      }
      </script>
      

      Dieses Snippet speichert zunächst exampleLeakyProperty. Wenn der beforeDestroy Hook ausgeführt wird, protokolliert dieser Snippet die Nachricht An diesem Punkt wurden Watchers, untergeordnete Komponenten und Ereignis-Listener noch nicht zerstört. und dann exampleLeakyProperty gelöscht.

      zerstört

      Bis zu den zerstörten Hook erreichen, ist praktisch nichts mehr in Ihrer Komponente. Alles, was daran hing, wurde zerstört.

      Verwenden Sie zerstört, wenn Sie eine Last-Minute-Bereinigung ausführen oder einen Remote-Server darüber informieren müssen, dass die Komponente zerstört wurde:

      ExampleComponent.vue

      <script>
      import ExampleAnalyticsService from './example-analytics-service'
      
      export default {
        destroyed() {
          console.log(`At this point, watchers, child components, and event listeners have been torn down.`)
          console.log(this)
          ExampleAnalyticsService.informService('Component destroyed.')
        }
      }
      </script>
      

      Zuerst importiert dieser Snippet ExampleAnalyticsService. Wenn der beforeDestroy Hook ausgeführt wird, protokolliert dieser Snippet die Nachricht An diesem Punkt wurden Watchers, untergeordnete Komponenten und Ereignis-Listener zerstört. Was von der Komponente übrig bleibt, wird in die Konsole protokolliert und ExampleAnalyticsService wird an die Nachricht Komponente zerstört übergeben.

      Damit haben Sie Ihre allgemeine Überprüfung der Vue.js Lifecycle Hooks abgeschlossen.

      Andere Hooks

      Es gibt zwei weitere Hooks, aktiviert und deaktiviert. Diese sind für keep-alive Komponenten, ein Thema, das außerhalb des Geltungsbereichs dieses Artikels liegt.

      Es genügt zu sagen, dass sie es Ihnen ermöglichen, zu erkennen, wenn eine Komponente, die in einem Tag <keep-alive></keep-alive> eingegeben wird, ein- oder ausgeschaltet wird. Vielleicht verwenden Sie sie, um Daten für Ihre Komponente abzurufen oder Statusänderungen zu verarbeiten, wobei sie sich als erstellt und beforeDestroy effektiv verhalten, ohne dass eine vollständige Neuerstellung der Komponente erforderlich ist.

      Zusammenfassung

      In diesem Artikel wurden Ihnen verschiedene Lifecycle Hooks vorgestellt, die im Vue.js Instance Lifecycle verfügbar sind. Sie haben die verschiedenen Anwendungsfälle für die Erstellung von Hooks, die Montage von Hooks, die Aktualisierung von Hooks und die Zerstörung von Hooks erkundet.

      Wenn Sie mehr über Vue.js erfahren möchten, lesen Sie unsere Themenseite zu Vue.js für Übungen und Programmierprojekte.



      Source link

      Cómo funcionan los enlaces de ciclo de vida de Vue.js


      Introducción

      Los enlaces de ciclo de vida son una ventana para ver cómo la biblioteca que está usando funciona en segundo plano. Los enlaces de ciclo de vida le permiten saber cuándo se crea su componente, se añade al DOM, se actualiza o se destruye.

      Este diagrama de la documentación oficial de Vue.js captura el ciclo de vida de la instancia Vue.js:

      Diagrama del ciclo de vida de la instancia Vue.js

      Este artículo le explicará los enlaces de creación, montaje, actualización y destrucción.

      Cómo funcionan los enlaces de creación (inicialización)

      Los enlaces de creación son los primeros enlaces que se ejecutan en su componente. Le permiten realizar acciones antes de que su componente haya sido añadido al DOM. A diferencia de cualquier otro enlace, los enlaces de creación también se ejecutan durante la renderización del lado del servidor.

      Utilice los enlaces de creación si necesita configurar cosas en su componente, durante la renderización del cliente y la renderización del servidor.

      No tendrá acceso al DOM o al elemento de montaje objetivo (this.$el) dentro de los enlaces de creación.

      beforeCreate

      El enlace beforeCreate se ejecuta en el momento de inicializar su componente. Los datos no se han hecho reactivos y los eventos no se han configurado aún:

      ExampleComponent.vue

      <script>
      export default {
        beforeCreate() {
          console.log('At this point, events and lifecycle have been initialized.')
        }
      }
      </script>
      

      En este ejemplo, cuando el enlace beforeCreate se ejecuta, este fragmento de código registrará el mensaje: en este momento, los eventos y el ciclo de vida se han inicializado.

      created

      Puede acceder a los datos reactivos y a los eventos que están activos con el enlace created. Las plantilla y Virtual DOM no han sido montados aún o renderizados:

      ExampleComponent.vue

      <template>
        <div ref="example-element">{{ propertyComputed }}</div>
      </template>
      
      <script>
      export default {
        data() {
          return {
            property: 'Example property.'
          }
        },
      
        computed: {
          propertyComputed() {
            return this.property
          }
        },
      
        created() {
          console.log('At this point, this.property is now reactive and propertyComputed will update.')
          this.property = 'Example property updated.'
        }
      }
      </script>
      

      En este ejemplo, el fragmento de código almacenará property como Example property. Cuando se ejecuta el enlace created, se registrará un mensaje de At this point, this.property is now reactive and propertyComputed will update. y, luego, property se cambia a Example property updated.

      Más adelante en el ciclo de vida, {{ propertyComputed }} aparecerá como Example property updated, en vez de como Example property.

      En este paso, ha revisado algunos ejemplos de enlaces de creación y está listo para pasar a la siguiente parte del ciclo de vida, los enlaces de montaje.

      Cómo funcionan los enlaces de montaje (inserción DOM)

      Los enlaces de montaje a menudo son los enlaces más usados. Le permiten acceder a su componente inmediatamente antes y después de la primera renderización. Sin embargo, no se ejecutan durante la renderización del lado del servidor.

      Utilice enlaces de montaje si necesita acceder o modificar el DOM de su componente inmediatamente antes o después de la renderización inicial.

      No utilice los enlaces de montaje si necesita obtener algunos datos para su componente durante la inicialización.

      Nota: Utilice created (o created y activated para los componentes de keep-alive) para esto. Especialmente si necesita esos datos durante la renderización del lado del servidor.

      beforeMount

      El enlace beforeMount se ejecuta justo antes de que se produzca la renderización inicial y tras compilarse las funciones de plantilla o renderización:

      ExampleComponent.vue

      <script>
      export default {
        beforeMount() {
          console.log(`At this point, vm.$el has not been created yet.`)
        }
      }
      </script>
      

      En este ejemplo, cuando se ejecuta el enlace beforeMount, este fragmento de código registrará el mensaje: At this point, vm.$el has not been created yet..

      mounted

      En el enlace mounted, tendrá acceso completo al componente reactivo, las plantillas y DOM renderizado (a través de this.$el).

      Utilice mounted para modificar el DOM, sobre todo cuando integra bibliotecas no Vue:

      ExampleComponent.vue

      <template>
        <div ref="example-element">Example component.</div>
      </template>
      
      <script>
      export default {
        mounted() {
          console.log(`At this point, vm.$el has been created and el has been replaced.`);
          console.log(this.$el.textContent) // Example component.
        }
      }
      </script>
      

      En este ejemplo, cuando se ejecuta el enlace mounted, este fragmento de código registrará el mensaje At this point, vm.$el has been created and el has been replaced.. Además, se registrará un mensaje de Contenido de ejemplo (this.$el.textContent).

      En esta sección, exploró casos de uso para los enlaces de montaje. En el siguiente paso, revisó algunos ejemplos que usan los enlaces de actualización.

      Comprender los enlaces de actualización (Diff y Re-render)

      Los enlaces de actualización se invocan siempre que una propiedad reactiva usada por su componente cambie u otra cosa haga que se vuelva a renderizar. Le permiten engancharse al ciclo watch-compute-render para su componente.

      Utilice los enlaces de actualización si necesita saber cuándo se vuelve a renderizar su componente, quizá para depurar o perfilar.

      No utilice ganchos de actualización si necesita saber cuándo cambia una propiedad reactiva en su componente. Utilice propiedades computadas o vigilantes para eso.

      beforeUpdate

      El enlace beforeUpdate se ejecuta cuando los datos cambian en su componente, y el ciclo de actualización se inicia, justo antes de que el DOM se corrija y vuelva a renderizar.

      Utilice beforeUpdate si necesita obtener el nuevo estado de cualquier dato reactivo en su componente antes de que se renderice realmente.

      ExampleComponent.vue

      <template>
        <div ref="example-element">{{counter}}</div>
      </template>
      
      <script>
      export default {
        data() {
          return {
            counter: 0
          }
        },
      
        created() {
          setInterval(() => {
            this.counter++
          }, 1000)
        },
      
        beforeUpdate() {
          console.log(`At this point, Virtual DOM has not re-rendered or patched yet.`)
          // Logs the counter value every second, before the DOM updates.
          console.log(this.counter)
        }
      }
      </script>
      

      Primero, este fragmento de código guardará counter como 0. Cuando se ejecute el enlace created, aumentará counter cada 1000 ms. Cuando el enlace beforeUpdate se ejecuta, este fragmento de código registrará el mensaje: En este momento, Virtual DOM no se ha vuelto a renderizar ni se ha parcheado y se registra un número para counter,

      updated

      El enlace updated se ejecuta cuando cambian los datos en su componente y el DOM se vuelve a renderizar.

      Use updated si necesita acceder al DOM tras cambiar una propiedad:

      ExampleComponent.vue

      <template>
        <div ref="example-element">{{counter}}</div>
      </template>
      
      <script>
      export default {
        data() {
          return {
            counter: 0
          }
        },
      
        created() {
          setInterval(() => {
            this.counter++
          }, 1000)
        },
      
        updated() {
          console.log(`At this point, Virtual DOM has re-rendered and patched.`)
          // Fired every second, should always be true
          console.log(+this.$refs['example-element'].textContent === this.counter)
        }
      }
      </script>
      

      Primero, este fragmento de código guardará counter como 0. Cuando el enlace created se ejecute, incrementará counter cada 1000 ms. Cuando se ejecuta el enlace updated, este fragmento de código registrará el mensaje: En este momento, Virtual DOM se ha vuelto a renderizar y parcheado y se registra un valor booleano de true porque el valor renderizado y el valor actual con iguales.

      Ahora que ha explorado el uso de los enlaces de actualización, está listo para aprender sobre los enlaces de destrucción.

      Comprender los enlaces de destrucción (Desmontaje)

      Los enlaces de destrucción le permiten realizar acciones cuando se destruye su componente, como la limpieza o el envío de análisis. Se activan cuando su componente se desmonta y elimina del DOM.

      beforeDestroy

      beforeDestroy se activa justo antes del desmontaje. Su componente seguirá estando completamente presente y funcional.

      Utilice beforeDestroy si necesita limpiar eventos o suscripciones reactivas:

      ExampleComponent.vue

      <script>
      export default {
        data() {
          return {
            exampleLeakyProperty: 'This represents a property that will leak memory if not cleaned up.'
          }
        },
      
        beforeDestroy() {
          console.log(`At this point, watchers, child components, and event listeners have not been teared down yet.`)
          // Perform the teardown procedure for exampleLeakyProperty.
          // (In this case, effectively nothing)
          this.exampleLeakyProperty = null
          delete this.exampleLeakyProperty
        }
      }
      </script>
      

      Este fragmento de código primero almacenará exampleLeakyProperty. Cuando el enlace beforeDestroy se ejecuta, este fragmento de código registrará el mensaje En este momento, los vigilantes, componentes secundarios y oyentes de eventos no hay sido desmontados aún y luego se elimina exampleLeakyProperty.

      destroyed

      Cuando llegue al enlace destroyed, su componente estará prácticamente vacío. Todo lo que estaba unido a él se ha destruido.

      Utilice destroyed si necesita realizar cualquier limpieza de último minuto o informar a un servidor remoto que el componente se ha destruido.

      ExampleComponent.vue

      <script>
      import ExampleAnalyticsService from './example-analytics-service'
      
      export default {
        destroyed() {
          console.log(`At this point, watchers, child components, and event listeners have been torn down.`)
          console.log(this)
          ExampleAnalyticsService.informService('Component destroyed.')
        }
      }
      </script>
      

      Primero, este fragmento de código importará ExampleAnalyticsService. Cuando se ejecute el enlace beforeDestroy, este fragmento de código registrará el mensaje At this point, watchers, child components, and event listeners have been torn down.. Lo que queda del componente se registrará en la consola y a ExampleAnalyticsService se pasará el mensaje Componente destruido.

      Con eso, completó su revisión general de los enlaces de ciclo de vida de Vue.js.

      Otros enlaces

      Hay otros dos enlaces, activated y deactivated. Estos son para los componentes keep-alive, un tema que está fuera del alcance de este artículo.

      Es suficiente decir que le permiten detectar cuando un componente que está envuelto en una etiqueta <keep-alive><keep-alive> se activa o desactiva. Es posible que los use para buscar datos para su componente o administrar los cambios de estado, comportándose de forma efectiva como created y beforeDestroy sin la necesidad de realizar una reconstrucción completa del componente.

      Conclusión

      En este artículo, hemos explicado los diferentes enlaces de ciclo de vida disponibles en el ciclo de vida de la instancia Vue.js. Ha explorado los diferentes casos de uso para los enlaces de creación, los enlaces de montaje, los enlaces de actualización y los enlaces de destrucción.

      Si desea saber más sobre Vue.js, consulte nuestra página del tema Vue.js para consultar ejercicios y proyectos de programación.



      Source link

      Comprendre les hooks de cycle de vie Vue.js


      Introduction

      Les hooks de cycle de vie apparaissent sous la forme d’une fenêtre dans laquelle vous pouvez voir de quelle manière la bibliothèque que vous utilisez fonctionne en arrière-plan. Ils vous permettent de savoir à quel moment votre composant est créé, ajouté au DOM, mis à jour ou détruit.

      Ce schéma, tiré de la documentation officielle de Vue.js, représente le cycle de vie de l’instance Vue.js :

      Schéma du cycle de vie de Vue.js

      Cet article est une introduction aux hooks de création, de compilation, de mise à jour et de destruction.

      Comprendre les hooks de création (initialisation)

      Les hooks de création sont les tous premiers à s’exécuter dans votre composant. Ils vous permettent de réaliser des actions avant même que votre composant n’ait été ajouté au DOM. Contrairement aux autres, les hooks de création sont également exécutés lorsque le rendu est généré côté serveur.

      Vous pouvez les utiliser pour configurer certains éléments dans votre composant, que le rendu soit généré côté client ou côté serveur.

      À l’intérieur des hooks de création, vous n’aurez pas accès au DOM ou à l’élément de compilation cible (this.$el).

      beforeCreate

      Le hook beforeCreate s’exécute au moment même de l’initalisation de votre composant. data n’a pas été activé et les events n’ont pas encore été configurés :

      ExampleComponent.vue

      <script>
      export default {
        beforeCreate() {
          console.log('At this point, events and lifecycle have been initialized.')
        }
      }
      </script>
      

      Dans cet exemple, lorsque le hook beforeCreate est exécuté, ce fragment de code consigne le message suivant : Initialisation des événements et du cycle de vie.

      created

      Le hook created vous permet d’accéder aux data et events qui sont actifs. La compilation ou le rendu des modèles et du DOM virtuel n’ont pas encore été déclenchés :

      ExampleComponent.vue

      <template>
        <div ref="example-element">{{ propertyComputed }}</div>
      </template>
      
      <script>
      export default {
        data() {
          return {
            property: 'Example property.'
          }
        },
      
        computed: {
          propertyComputed() {
            return this.property
          }
        },
      
        created() {
          console.log('At this point, this.property is now reactive and propertyComputed will update.')
          this.property = 'Example property updated.'
        }
      }
      </script>
      

      Dans cet exemple, le fragment de code consigne que property est une Example property. Lorsque le hook created est exécuté, le message suivant est enregistré : this.property est maintenant réactive et propertyComputed sera mise à jour. Ensuite, la valeur sous property est remplacée par Example property updated.

      Plus tard dans le cycle de vie, {{propertyComputed }} indiquera Example property updated au lieu de Example property.

      Au cours de cette étape, vous avez examiné quelques exemples de hooks de création. Vous êtes maintenant prêt à passer à la prochaine étape du cycle de vie, la compilation de hooks.

      Comprendre les hooks de compilation (insertion DOM)

      Les hooks de compilation sont ceux qui sont généralement les plus utilisés. Ils vous permettent d’accéder à votre composant immédiatement avant et après avoir généré le premier rendu. Cependant, ils ne sont pas exécutés lors du rendu côté serveur.

      Vous pouvez utiliser les hooks de compilation pour accéder ou modifier le DOM de votre composant immédiatement avant ou après avoir généré le rendu initial.

      N’utilisez pas de hooks de compilation pour récupérer des données sur votre composant lors de son initialisation.

      Remarque : pour cela, utilisez plutôt created (ou created et activated pour les composants keep-alive), surtout si vous avez besoin de ces données pour le rendu côté serveur.

      beforeMount

      Le hook beforeMount s’exécute juste avant l’occurrence du rendu initial et une fois que les fonctions du modèle ou du rendu aient été compilées :

      ExampleComponent.vue

      <script>
      export default {
        beforeMount() {
          console.log(`At this point, vm.$el has not been created yet.`)
        }
      }
      </script>
      

      Dans cet exemple, lorsque le hook beforeMount est exécuté, ce fragment de code enregistrera le message suivant : vm.$el n'a pas encore été créé.

      mounted

      Le hook mounted vous permet d’avoir un total accès au composant réactif, aux modèles et au DOM rendu (via this.$el).

      Utilisez mounted pour modifier le DOM, notamment lors de l’intégration de bibliothèque hors Vue :

      ExampleComponent.vue

      <template>
        <div ref="example-element">Example component.</div>
      </template>
      
      <script>
      export default {
        mounted() {
          console.log(`At this point, vm.$el has been created and el has been replaced.`);
          console.log(this.$el.textContent) // Example component.
        }
      }
      </script>
      

      Dans notre exemple, lorsque le hook mounted est exécuté, ce fragment de code consigne le message suivant : Crée vm.$el pour remplacer el. Le message Ceci est un exemple de texte (this.$el.textContent) sera également enregistré.

      Au cours de cette section, vous avez exploré les cas d’utilisation de hooks de compilation. À l’étape suivante, vous allez aborder quelques exemples de hooks de mise à jour.

      Comprendre les hooks de mise à jour (Diff et Re-render)

      Les Updating hooks se déclenchnt à chaque fois qu’une propriété réactive utilisée par votre composant change ou que quelque chose d’autre vous pousse à le re-render. Ils vous permettent de vous hooker au cycle watch-compute-render de votre composant.

      Vous pouvez utiliser les hooks de mise à jour pour savoir à quel moment le rendu du composant est de nouveau déclenché, éventuellement en vue d’un débogage ou d’un profilage.

      N’utilisez pas la mise à jour de hooks pour déterminer à quel moment une propriété réactive de votre composant change. Utilisez plutôt computed properties ou watchers.

      beforeUpdate

      Le hook beforeUpdate s’exécute une fois que les données de votre composant changent et que le cycle de mise à jour commence, juste avant que le DOM n’ait été patché et n’ait généré un re-render.

      Utilisez beforeUpdate pour consulter le nouvel état de toute donnée réactive de votre composant avant que le rendu soit effectivement généré :

      ExampleComponent.vue

      <template>
        <div ref="example-element">{{counter}}</div>
      </template>
      
      <script>
      export default {
        data() {
          return {
            counter: 0
          }
        },
      
        created() {
          setInterval(() => {
            this.counter++
          }, 1000)
        },
      
        beforeUpdate() {
          console.log(`At this point, Virtual DOM has not re-rendered or patched yet.`)
          // Logs the counter value every second, before the DOM updates.
          console.log(this.counter)
        }
      }
      </script>
      

      Tout d’abord, sous counter, ce fragment de code enregistrera 0. Lorsque le hook created est exécuté, la valeur du counter incrémentera toutes les 1 000 ms. Lorsque le hook beforeUpdate est exécuté, ce fragment de code enregistrera le message suivant : DOM virtuel pas encore été rendu ou patché. et un numéro sera enregistré sous counter.

      updated

      L’exécution du hook updated se fait à chaque fois que les données concernant votre composant sont modifiées et que le DOM déclenche un re-render.

      Utilisez updated pour accéder au DOM une fois qu’une propriété ait été modifiée :

      ExampleComponent.vue

      <template>
        <div ref="example-element">{{counter}}</div>
      </template>
      
      <script>
      export default {
        data() {
          return {
            counter: 0
          }
        },
      
        created() {
          setInterval(() => {
            this.counter++
          }, 1000)
        },
      
        updated() {
          console.log(`At this point, Virtual DOM has re-rendered and patched.`)
          // Fired every second, should always be true
          console.log(+this.$refs['example-element'].textContent === this.counter)
        }
      }
      </script>
      

      Tout d’abord, sous counter, ce fragment de code enregistrera 0. Lorsque le hook created est exécuté, la valeur du counter incrémentera toutes les 1 000 ms. Lorsque le hook updated est exécuté, ce fragment de code consigne le message suivant : Nouveau rendu et patch du DOM virtuel. Et, étant donné que la valeur du rendu est égale à la valeur actuelle, la valeur booléenne de true est consignée.

      Maintenant que vous en savez davantage sur l’utilisation des hooks de mise à jour, nous pouvons aborder les hooks de destruction.

      Comprendre les hooks de destruction (Démontage)

      Les hooks de destruction vous permettent d’effectuer des actions lorsque votre composant est détruit. Vous pouvez par exemple procéder à son nettoyage ou à l’envoi d’analyses. Ils se déclenchent au moment où votre composant est détruit et supprimé du DOM.

      beforeDestroy

      Le déclenchement de beforeDestroy se fait juste avant le démontage. Votre composant sera toujours présent et totalement fonctionnel.

      Utilisez beforeDestroy pour nettoyer des événements ou des abonnements réactifs :

      ExampleComponent.vue

      <script>
      export default {
        data() {
          return {
            exampleLeakyProperty: 'This represents a property that will leak memory if not cleaned up.'
          }
        },
      
        beforeDestroy() {
          console.log(`At this point, watchers, child components, and event listeners have not been teared down yet.`)
          // Perform the teardown procedure for exampleLeakyProperty.
          // (In this case, effectively nothing)
          this.exampleLeakyProperty = null
          delete this.exampleLeakyProperty
        }
      }
      </script>
      

      Ce fragment de code consignera tout d’abord exampleLeakyProperty. Lorsque le hook beforeDestroy est exécuté, ce fragment de code enregistrera le message suivant : Les observateurs, composants enfants et écouteurs d'événements n'ont pas encore été éliminés. Ensuite, exampleLeakyProperty est supprimé.

      destroyed

      Une fois que vous aurez atteint votre hooker destroyed, il ne vous restera pratiquement plus rien à faire sur votre composant. Tout ce qui y était rattaché a été détruit.

      Utilisez destroyed pour procéder à un nettoyage de dernière minute ou signaler à un serveur distant que le composant a été détruit :

      ExampleComponent.vue

      <script>
      import ExampleAnalyticsService from './example-analytics-service'
      
      export default {
        destroyed() {
          console.log(`At this point, watchers, child components, and event listeners have been torn down.`)
          console.log(this)
          ExampleAnalyticsService.informService('Component destroyed.')
        }
      }
      </script>
      

      Dans un premier temps, ce fragment de code importera ExampleAnalyticsService. Lorsque le hook beforeDestroy est exécuté, ce fragment de code consignera le message suivant : Supprime les observateurs, composants enfant et écouteurs d'événements. Ce qui reste du composant sera consigné dans la console et ExampleAnalyticsService transmettra le message suivant :Détruit.

      Voilà, vous êtes arrivé à la fin votre révision générale sur les hooks de cycle de vie Vue.js.

      Autres hooks

      Il existe deux autres hooks : activated et deactivated. Ils sont dédiés aux composants keep-alive, un sujet qui n’entre pas dans le cadre de cet article.

      Il vous suffit de savoir qu’ils vous permettent de détecter à quel moment un composant enveloppé dans une balise <keep-alive></keep-alive> est activé ou désactivé. Vous pouvez les utiliser pour récupérer les données de votre composant ou gérer les changements d’état, car ils se comportent effectivement comme created et beforeDestroy sans avoir à reconstruire un composant dans son intégralité.

      Conclusion

      Dans cet article, vous avez abordé les différents hooks de cycle de vie disponibles dans le cycle de vie d’une instance Vue.js. Vous avez découvert différents cas d’utilisation de hooks de création, de compilation, de mise à jour et de destruction.

      Si vous souhaitez en savoir plus sur Vue.js, veuillez consulter notre page thématique Vue.js dans laquelle vous trouverez des exercices et des projets de programmation.



      Source link