Vue.js: Lifecycle-Hooks für Ihre und Komponenten von Drittanbietern

Lifecycle Hooks sind ein sehr wichtiger Bestandteil jeder Komponente. Wir, unsere Anwendung, müssen häufig wissen, was mit einer Komponente passiert, wenn sie erstellt, bereitgestellt, aktualisiert oder zerstört wird.

In der Komponente können wir diese Ereignisse mit geeigneten Methoden erfassen, zum Beispiel:

• created - Komponenteninstanz wird erstellt
• eingehängt - Die Komponenteninstanz ist eingehängt
• aktualisiert - Das virtuelle DOM wurde aufgrund von Datenänderungen aktualisiert
• zerstört - die Komponenteninstanz wird zerstört
• usw. Die Dokumentation

Im Code unserer Komponente sieht es so aus:

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

Gut Was aber, wenn die übergeordnete Komponente wissen muss, was in der untergeordneten Komponente geschieht, z. B., dass die Komponente aktualisiert wurde? In der untergeordneten Komponente können wir ein Ereignis auslösen und einen Listener an die übergeordnete Komponente hängen. Im Code unserer Anwendung sieht es so aus:

 //   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> 

Wenn die untergeordnete Komponente aktualisiert wird, fängt die übergeordnete Komponente das aktualisierte Ereignis ab und die nützliche Methode () wird ausgeführt.

Alles cool! Aber was ist, wenn wir eine von npm oder git heruntergeladene Komponente eines Drittanbieters einbetten und in der übergeordneten Komponente etwas Nützliches tun müssen, beispielsweise beim Mounten? Lassen Sie sich in den Code einer Komponente eines Drittanbieters ein, um ein Ereignis zu generieren ... Keine gute Idee! Aber was ist, wenn ich dir sage, dass du es nicht musst? Stattdessen können wir uns die Veranstaltung einfach anhören! Der Name dieses Ereignisses ist der Name des Lifecycle- @hook: , dem jedoch das Präfix @hook: muss. Beispiel: @hook:mounted, @hook:updated @hook:destroyed @hook:___ , @hook:mounted, @hook:updated @hook:destroyed .

Im Code sieht es ungefähr so ​​aus:

 //   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> 

Dies scheint mir eine sehr nützliche Funktion zu sein, um sowohl mit eigenen als auch mit Komponenten von Drittanbietern zu arbeiten. Ich hoffe, Sie werden es nützlich finden. Es ist etwas seltsam, dass die Dokumentation kein Wort darüber enthält und einige Funktionen nur durch Lesen des Quellcodes gefunden werden können.

Danke fürs Lesen. Lesen Sie das Dock und die Quelle! Und mit dem kommenden neuen Jahr 2020!