Vue.js: Kait siklus hidup komponen Anda dan pihak ketiga

Kait siklus hidup adalah bagian yang sangat penting dari komponen apa pun. Kami, aplikasi kami, sering perlu tahu apa yang terjadi pada komponen ketika komponen itu dibuat, dipasang, diperbarui, atau dihancurkan.

Dalam komponen, kita dapat menangkap peristiwa ini menggunakan metode yang sesuai, misalnya:

• dibuat - instance komponen dibuat
• terpasang - instance komponen sudah terpasang
• diperbarui - DOM virtual telah diperbarui karena perubahan data
• dihancurkan - instance komponen hancur
• dll. Dokumentasi

Dalam kode komponen kami, akan terlihat seperti ini:

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

Bagus Tetapi bagaimana jika komponen induk perlu tahu apa yang terjadi dalam komponen anak, misalnya, bahwa komponen tersebut telah diperbarui? Dalam komponen anak, kita dapat meningkatkan suatu acara, dan menggantung pendengar pada komponen induk. Dalam kode aplikasi kita, akan terlihat seperti ini:

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

Hebat, ketika memperbarui komponen anak, komponen induk menangkap peristiwa yang diperbarui dan metode bergunaMethod () dijalankan.

Semuanya keren! Tetapi bagaimana jika kita perlu menyematkan komponen pihak ketiga yang diunduh dari npm atau git dan melakukan sesuatu yang berguna dalam komponen induk, misalnya, ketika memasangnya? Masuk ke kode komponen pihak ketiga, di hook yang terpasang untuk menghasilkan acara ... Bukan ide yang bagus! Tetapi bagaimana jika saya memberi tahu Anda bahwa Anda tidak harus melakukannya! Sebagai gantinya, kita hanya bisa mendengarkan acara! Nama acara ini akan menjadi nama kait siklus hidup, tetapi awalan @hook: harus @hook: sesuatu seperti ini @hook:___ , misalnya: @hook:mounted, @hook:updated @hook:destroyed .

Dalam kode tersebut, akan terlihat seperti ini:

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

Menurut saya ini adalah fungsi yang sangat berguna untuk bekerja dengan komponennya sendiri dan pihak ketiga. Saya harap Anda akan merasakan manfaatnya. Agak aneh bahwa tidak ada kata dalam dokumentasi tentang hal itu dan beberapa fitur hanya dapat ditemukan dengan membaca kode sumber.

Terima kasih sudah membaca. Baca dok dan sumbernya! Dan dengan tahun baru 2020 mendatang!