۱۱ قلاب چرخه عمری در Vue.js – راهنمای کاربردی

زمانی که نخستین بار با Vue.js مواجه می‌شوید، نخستین چیزی که حتماً باید با آن آشنا باشید، مفهوم «قلاب‌های چرخه عمری» (Lifecycle Hooks) است. به این وسیله ‌می‌توانید منطق جاوا اسکریپت را درون متدها یا «مشخصه‌های محاسبه ‌شده»‌ (COMPUTED Properties) و نظایر این قرار دهید. البته بدیهی است که در ابتدای آشنایی با یک فناوری شوق زیادی برای پیاده‌سازی هر جه سریع‌تر عملی آن وجود دارد. اما توجه داشته باشید که درک مناسب از مفاهیم مرتبط با قلاب چرخه عمری در Vue.js موجب ایجاد پایه‌ای قوی برای یادگیری این فریمورک جاوا اسکریپت می‌شود.

وهله Vue

هسته اصلی Vue.js مفهوم «وهله» (Instance) است. هر اپلیکیشن Vue با ایجاد یک وهله آغاز می‌شود. وهله شیئی است که به ایجاد رفتار مطلوب کمک می‌کند. همان طور که می‌توانید تصور کنید، وهله مسئول موارد مختلفی از قبیل تعیین مشاهده داده، کامپایل کردن قالب، نصب وهله روی DOM، به‌روزرسانی DOM در زمان تغییر یافتن داد‌ه‌ها و مواردی از این دست است.

قلاب‌های چرخه عمری Vue

قلاب‌های چرخه عمری تابع‌هایی هستند که امکان افزودن کد در مراحل خاص را فراهم می‌سازند. این مراحل یازده‌گانه به شرح زیر هستند:

1. beforeCreate
2. create
3. beforeMount
4. mounted
5. beforeUpdate
6. updated
7. activated
8. deactivated
9. beforeDestroy
10. destroyed
11. errorCaptured

قلاب‌های beforeCreate ،created ،beforeMount ،mounted و errorCaptured به صورت خودکار اجرا می‌شوند و همه موارد دیگر زمانی که اتفاقی رخ دهد اجرا خواهند شد. ما آن‌ها را یک به یک با مثال بررسی می‌کنیم تا به طور کامل درک کنید.

قلاب beforeCreate

این قلاب درست پس از این که وهله مقداردهی شد و پیش از آن که همه گزینه‌ها پردازش شوند، فراخوانی می‌شود. این قلاب در رندرینگ سمت سرور فراخوانی می‌شود.

قلاب created

این قلاب درست پس از این که وهله ایجاد شد و پس از آن که همه گزینه‌ها تنظیم شدند، فراخوانی می‌شود. این قلاب در رندرینگ سمت سرور فراخوانی می‌شود.

قلاب beforeMount

این قلاب پیش از نصب روی DOM فراخوانی می‌شود. این قلاب در سمت کلاینت فراخوانی می‌شود.

قلاب mounted

این قلاب زمانی فراخوانی می‌شود که وهله نصب شده است و el یعنی DOM جایگزین شده است. این قلاب در سمت کلاینت فراخوانی می‌شود.

قلاب beforeUpdate

این قلاب زمانی فراخوانی می‌شود که برخی داده‌ها پیش از رندر مجدد DOM تغییر یافته باشند. این قلاب در سمت کلاینت فراخوانی می‌شود.

قلاب updated

این قلاب زمانی فراخوانی می‌شود که داده‌ها تغییر یافته باشند و DOM رندر مجدد شده باشد. این قلاب در سمت کلاینت فراخوانی می‌شود.

قلاب activated

این قلاب برای کامپوننت‌های <keep-alive> استفاده می‌شود و به ما امکان می‌دهد که بدانیم یک کامپوننت چه زمانی درون تگ <keep-alive></keep-alive> فعال می‌شود. این قلاب در سمت کلاینت فراخوانی می‌شود.

قلاب deactivated

این قلاب برای کامپوننت‌های <keep-alive> استفاده می‌شود و به ما امکان می‌دهند در مورد زمانی که یک کامپوننت درون تگ <keep-alive></keep-alive> فعال می‌شود، کسب اطلاع کنیم. این قلاب در سمت کلاینت فراخوانی می‌شود.

قلاب beforeDestroy

این قلاب درست پیش از این که وهله Vue تخریب شود، فراخوانی می‌شود. در این مرحله وهله کاملاً کاربردی است. این قلاب در سمت کلاینت فراخوانی می‌شود.

قلاب destroyed

این قلاب پس از آن که یک وهله Vue تخریب شد، فراخوانی می‌شود. این به آن معنی نیست که همه کد را از DOM حذف خواهد کرد؛ بلکه همه منطق جاوا اسکریپت و وهله دیگر وجود نخواهند داشت. این قلاب در سمت کلاینت فراخوانی می‌شود.

قلاب errorCaptured

این قلاب ممکن است در ابتدا شما را سردرگم کند. مستندات رسمی آن را چنین توصیف می‌کند:

این قلاب زمانی فراخوانی می‌شود که یک خطا از هر کامپوننت پایین‌تر به دام افتد. این قلاب سه آرگومان به نام‌ها خطا، وهله کامپوننت که خطا را موجب شده و یک رشته که شامل اطلاعاتی در مورد محل دریافت خطا است، می‌گیرد. این قلاب برای توقف انتشار بیشتر خطا می‌تواند مقدار False بگیرد.

در واقع این قلاب از سوی یک کامپوننت والد برای مدیریت یک خطا از کامپوننت فرزند استفاده می‌شود. این قلاب از سوی کامپوننت اصلی قابل دسترس نیست، بلکه از سوی کامپوننت فرزند مورد دسترسی قرار می‌گیرد.

بررسی عملی قلاب‌های چرخه عمری

تا اینجا کل بحث به بررسی مفاهیم نظری گذشت. اینک زمان آن رسیده است که آن‌ها را در عمل مورد بررسی قرار می‌دهیم. برای درک بهتر کد را به 3 بخش تقسیم کرده‌ایم.

فیلم آموزش پروژه محور ویو جی اس و لاراول – طراحی وب اپلیکیشن پیش رونده PWA با Vue.js و Laravel در فرادرس

کلیک کنید

بخش اول

این بخش شامل قلاب‌های چرخه عمری beforeCreate ،created ،beforeMount ،mounted ،beforeUpdate ،updated است.

در فایل HTML کد زیر را می‌نویسیم:

در فایل جاوا اسکریپت هم کد زیر را می‌نویسیم:

اگر اکنون کنسول مرورگر خود را باز کنید، همه کدهای ()console.log را می‌بینید و می‌توانید بفهمید که چه زمانی فراخوانی شده‌اند. ما یک setTimeout درون mounted اضافه کرده‌ایم تا درک بهتری از این که تابع پی از رندر شدن DOM فراخوانی می‌شود داشته باشید.

بخش دوم

در این بخش کد قلاب‌های چرخه عمری مربوط به activated و deactivated را می‌نویسیم.

فایل HTML شامل کد زیر است:

فایل جاوا اسکریپت نیز به صورت زیر است:

در کد فوق اگر دکمه‌ها را کلیک کنید، می‌توانید بین کامپوننت‌ها سوئیچ کنید و شیوه فراخوانی آن‌ها را بررسی کنید.

بخش سوم

در این بخش قلاب چرخه عمری errorCaptured را بررسی می‌کنیم. در فایل HTML کد زیر را می‌نویسیم:

در فایل جاوا اسکریپت نیز کد زیر را می‌نویسیم:

در کد فوق می‌بینیم که متد ()doesntexist تا زمانی که خطایی دریافت نشده است، وجود ندارد. این مثال موجب می‌شود به سرعت زمان فراخوانی شدن این قلاب را متوجه شویم و با طرز کار آن آشنا شویم. اینک بر عهده شما است که موارد کاربرد مناسب آن‌ها را در فرایند توسعه پروژه‌های خود تشخیص دهید.

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌‌های جاوا اسکریپت
• مجموعه آموزش‌‌های برنامه‌‌نویسی
• آموزش Vue.js — مجموعه مقالات مجله فرادرس
• مدیریت رویداد در کامپوننت Vue.js — از صفر تا صد
• پنج ابزار برای توسعه سریع اپلیکیشن های Vue.js — راهنمای کاربردی

==