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

۲۸۵ بازدید
آخرین به‌روزرسانی: ۱۴ شهریور ۱۴۰۲
زمان مطالعه: ۴ دقیقه
۱۱ قلاب چرخه عمری در 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 بخش تقسیم کرده‌ایم.

بخش اول

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

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

1<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
2<div id="app">
3 <h1>{{ title }}</h1> 
4  <button @click="title='New Title'">Update Title</button>
5  <button @click="destroy()">Destroy</button>
6</div>

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

1new Vue({
2  el: '#app',
3  data: {
4    title: 'Hello Vue!',
5  },
6   beforeCreate: function() {
7     console.log("beforeCreate()")
8  },
9  created: function() {
10    console.log("created()")
11  },
12  beforeMount: function() {
13    console.log("beforeMount()");
14  },
15  mounted: function() {
16    setTimeout(function(){console.log("mounted()")}, 3000);
17  },
18  beforeUpdate: function() {
19    console.log("beforeUpdate()")
20  },
21  updated: function() {
22    console.log("updated()")
23  },
24  beforeDestroy: function() {
25    console.log("beforeDestroy()")
26  },
27  destroyed: function() {
28    console.log("destroyed()")
29  },
30  methods: {
31    destroy: function() {
32      this.$destroy();
33    }
34  }
35})

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

بخش دوم

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

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

1<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
2<div id="app">
3  <button @click="selectedComponent='component1'">Comp1</button>
4  <button @click="selectedComponent='component2'">Comp2</button>
5   <keep-alive>
6     <component :is="selectedComponent"></component>
7   </keep-alive>
8</div>

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

1Vue.component('component1', {
2  data: function () {
3    return {
4      count: 0
5    }
6  },
7  activated: function() {
8    console.log("activated()")
9  },
10  deactivated: function() {
11    console.log("deactivate()")
12  },
13  template: '<h3>Template 1</h3>'
14})
15Vue.component('component2', {
16  data: function () {
17    return {
18      count: 0
19    }
20  },
21  template: '<h3>Template 2</h3>'
22})
23new Vue({
24  el: '#app',
25  data: {
26    selectedComponent: 'component2'
27  },
28})

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

بخش سوم

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

1<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
2<div id="app">
3   <componentparent>
4      <componentchild></componentchild>
5  </componentparent>
6</div>

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

1Vue.component('componentparent', {
2  errorCaptured(err, vm, info) {
3    console.log("error:", err);
4    console.log("vm:", vm);
5    console.log("info:", info);
6  },
7  template:'<h3> Component parent<slot></slot> </h3>',
8})
9Vue.component('componentchild', {
10  template: '<h3> Template Child {{doesntexist()}} </h3>'
11})
12new Vue({
13  el: '#app',
14})

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

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

==

بر اساس رای ۱ نفر
آیا این مطلب برای شما مفید بود؟
اگر بازخوردی درباره این مطلب دارید یا پرسشی دارید که بدون پاسخ مانده است، آن را از طریق بخش نظرات مطرح کنید.
منابع:
notonlycss
نظر شما چیست؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *