Vue.js: hooks du cycle de vie de vos composants et des composants tiers

Les crochets de cycle de vie sont une partie très importante de tout composant. Nous, notre application, avons souvent besoin de savoir ce qui arrive à un composant lorsqu'il est créé, monté, mis à jour ou détruit.

Dans le composant, nous pouvons intercepter ces événements en utilisant des méthodes appropriées, par exemple:

• créé - l'instance de composant est créée
• monté - l'instance de composant est montée
• mis à jour - le DOM virtuel a été mis à jour en raison de modifications des données
• destroy - l'instance de composant est détruite
• etc. La documentation

Dans le code de notre composant, il ressemblera à ceci:

// MyComponent.vue <template> <h1>Hello, {{ who }}</h1> </template> <script> export default { name: 'MyComponent', data() { return { who: 'world' } }, mounted() { //  -      } } </script> 

Bon. Mais que faire si le composant parent a besoin de savoir ce qui se passe dans le composant enfant, par exemple, que le composant a été mis à jour? Dans le composant enfant, nous pouvons déclencher un événement et bloquer un écouteur sur le composant parent. Dans le code de notre application, cela ressemblera à ceci:

 //   ChildComponent.vue <template> <div> <div>Count: {{ counter }}</div> <button @click="add">+1</button> </div> </template> <script> export default { name: 'ChildComponent', data() { return { counter: 0 } }, updated() { this.$emit('updated') }, methods: { add() { this.counter++ } } } </script> 

 //   ParentComponent.vue <template> <div> <ChildComponent @updated="usefulMethod"/> </div> </template> <script> import ChildComponent from 'ChildComponent.vue' export default { name: 'ParentComponent', components: { ChildComponent }, data() { return {} }, methods: { usefulMethod() { //  -        } } } </script> 

Génial, lors de la mise à jour du composant enfant, le composant parent intercepte l'événement mis à jour et la méthode utileMethod () s'exécute.

Tout est cool! Mais que se passe-t-il si nous devons intégrer un composant tiers téléchargé à partir de npm ou git et faire quelque chose d'utile dans le composant parent, par exemple, lors du montage? Entrez dans le code d'un composant tiers, dans un crochet monté pour générer un événement ... Pas une bonne idée! Mais si je vous dis que vous n’avez pas à le faire! Au lieu de cela, nous pouvons simplement écouter l'événement! Le nom de cet événement sera le nom du hook du cycle de vie, mais le préfixe @hook: doit y être @hook: quelque chose comme ceci @hook:___ , par exemple: @hook:mounted, @hook:updated @hook:destroyed .

Dans le code, cela ressemblera à ceci:

 //   ParentComponent.vue <template> <div> <ThirdPartyComponent @hook:mounted="usefulMethod"/> </div> </template> <script> import ThirdPartyComponent from 'vue-third-party-component' //   export default { name: 'ParentComponent', components: { ThirdPartyComponent }, data() { return {} }, methods: { usefulMethod() { //  -    mounted     } } } </script> 

Il me semble que c'est une fonctionnalité très utile pour travailler avec ses propres composants et ceux de tiers. J'espère que vous le trouverez utile. C'est un peu étrange qu'il n'y ait pas un mot dans la documentation à ce sujet et certaines fonctionnalités ne peuvent être trouvées qu'en lisant le code source.

Merci d'avoir lu. Lisez le dock et la source! Et avec la prochaine nouvelle année 2020!