Vue.js: خطاطيف دورة الحياة لمكوناتك والجهات الخارجية

خطاطيف دورة الحياة هي جزء مهم جدًا من أي مكون. نحن ، تطبيقنا ، نحتاج غالبًا إلى معرفة ما يحدث للمكون عند إنشائه أو تثبيته أو تحديثه أو إتلافه.

في المكون ، يمكننا التقاط هذه الأحداث باستخدام الأساليب المناسبة ، على سبيل المثال:

• تم إنشاؤه - يتم إنشاء مثيل المكون
• شنت - يتم تثبيت مثيل المكون
• تم التحديث - تم تحديث DOM الظاهري بسبب تغييرات البيانات
• دمرت - تم تدمير مثيل المكون
• إلخ الوثائق

في رمز المكون الخاص بنا ، سيبدو كما يلي:

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

حسنا. ولكن ماذا لو كان المكون الرئيسي بحاجة إلى معرفة ما يحدث في المكون الفرعي ، على سبيل المثال ، أنه قد تم تحديث المكون؟ في المكون الفرعي ، يمكننا رفع حدث ، وتعليق المستمع على المكون الأصل. في رمز طلبنا ، سيبدو كما يلي:

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

رائعة ، عند تحديث المكون الفرعي ، يمسك المكون الأصل الحدث الذي تم تحديثه ويتم تنفيذ الأسلوب المفيدثيثود ().

كل شيء رائع! ولكن ماذا لو احتجنا إلى تضمين مكون جهة خارجية تم تنزيله من npm أو git وفعل شيء مفيد في المكون الأصل ، على سبيل المثال ، عند تركيبه؟ ادخل إلى رمز مكون تابع لجهة خارجية ، في خطاف مُثبَّت لإنشاء حدث ... ليست فكرة جيدة! ولكن ماذا لو قلت لك أنه ليس عليك ذلك! بدلاً من ذلك ، يمكننا فقط الاستماع إلى الحدث! سيكون اسم هذا الحدث هو اسم ربط دورة الحياة ، لكنك تحتاج إلى إضافة بادئة @hook: شيء مثل هذا @hook:___ ، على سبيل المثال: @hook:mounted, @hook:updated @hook:destroyed .

في الكود ، سوف يبدو مثل هذا:

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

يبدو لي أن هذه وظيفة مفيدة للغاية للعمل مع كل من مكوناته وطرف ثالث. آمل أن تجدها مفيدة. من الغريب أنه لا توجد كلمة في الوثائق المتعلقة بها ويمكن العثور على بعض الميزات فقط من خلال قراءة التعليمات البرمجية المصدر.

شكرا للقراءة. قراءة قفص الاتهام والمصدر! ومع العام الجديد القادم 2020!