Lifecycle Hooks در Vue.js | مدیریت چرخه حیات کامپوننت‌ها با مثال کاربردی

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

چرخه حیات کامپوننت‌ها در Vue.js

هر کامپوننت در Vue.js از مراحل زیر در چرخه حیات خود عبور می‌کند:

• ایجاد (Creation): کامپوننت ایجاد و داده‌های اولیه آن تنظیم می‌شود.

• نصب (Mounting): کامپوننت به DOM متصل و نمایش داده می‌شود.

• بروزرسانی (Updating): با هر تغییر در داده‌ها، کامپوننت بروزرسانی و دوباره رندر می‌شود.

• نابودسازی (Destruction): کامپوننت از DOM حذف و تمامی رویدادها و داده‌های آن از بین می‌روند.

Lifecycle Hooks در Vue.js

هر مرحله از چرخه حیات شامل Lifecycle Hooks مختلفی است که به شما امکان می‌دهد در نقاط خاصی از چرخه حیات کامپوننت‌ها کدهای خود را اجرا کنید. در ادامه، هر یک از این hooks را توضیح می‌دهیم:

Hooks مربوط به مرحله ایجاد

beforeCreate: این hook اولین مرحله در چرخه حیات است و قبل از دسترسی به data و props اجرا می‌شود. این hook برای تنظیمات اولیه بدون استفاده از داده‌های کامپوننت مناسب است.

beforeCreate ( ) {
  console.log ( ' Component is being created ' ) ;
}

created: این hook پس از ایجاد داده‌ها، computed properties، و متدها اجرا می‌شود و به داده‌های data و props دسترسی دارید. اگر نیاز به فراخوانی API یا دریافت داده در زمان ایجاد کامپوننت دارید، می‌توانید از این hook استفاده کنید.

created ( ) {
  console.log ( ' Component has been created ' ) ;
}

Hooks مربوط به مرحله نصب (Mounting)

beforeMount: این hook قبل از نصب کامپوننت در DOM و رندر شدن آن اجرا می‌شود. در این مرحله، کامپوننت هنوز در DOM قابل مشاهده نیست.

beforeMount ( ) {
  console.log ( ' Component is about to be mounted ' ) ;
}

mounted: این hook بلافاصله پس از قرار گرفتن کامپوننت در DOM اجرا می‌شود و در این مرحله می‌توانید به المان‌های DOM کامپوننت دسترسی داشته باشید. این hook برای راه‌اندازی پلاگین‌های خارجی یا دسترسی به عناصر HTML مناسب است.

mounted ( ) {
  console.log ( ' Component has been mounted ' ) ;
}

Hooks مربوط به مرحله بروزرسانی (Updating)

beforeUpdate: این hook قبل از بروزرسانی و رندر مجدد کامپوننت اجرا می‌شود و می‌توانید تغییرات را قبل از اعمال نهایی مشاهده کنید.

beforeUpdate ( ) {
  console.log ( ' Component is about to be updated ' ) ;
}

updated: این hook پس از بروزرسانی کامپوننت و رندر مجدد آن اجرا می‌شود. این hook برای انجام عملیات پس از هر بار بروزرسانی مناسب است.

updated ( ) {
  console.log ( ' Component has been updated ' ) ;
}

Hooks مربوط به مرحله نابودسازی (Destruction)

beforeUnmount: این hook درست قبل از حذف کامپوننت از DOM اجرا می‌شود و به شما فرصت می‌دهد تا منابعی مانند تایمرها یا رویدادها را پاکسازی کنید.

beforeUnmount ( ) {
  console.log ( ' Component is about to be destroyed ' ) ;
}

unmounted: این hook پس از حذف کامل کامپوننت از DOM اجرا می‌شود و آخرین مرحله در چرخه حیات کامپوننت است.

unmounted ( ) {
  console.log ( ' Component has been destroyed ' ) ;
}

نمونه عملی از Lifecycle Hooks

در مثال زیر از چندین Lifecycle Hook برای مشاهده روند ایجاد و نابودسازی یک کامپوننت استفاده می‌شود:

< template >
  < div >
    < p > { { message } } < / p >
    < button @click = " toggleComponent " > Toggle Component < / button >
    < ChildComponent v-if = " isVisible " / >
  < / div >
< / template >

import ChildComponent from ' ./ChildComponent.vue ' ;

export default {
  data ( ) {
    return {
      message : ' Hello from Parent Component ' ,
      isVisible : true
    } ;
  } ,
  methods : {
    toggleComponent ( ) {
      this.isVisible = !this.isVisible ;
    }
  } ,
  components : {
    ChildComponent
  }
} ;

ChildComponent.vue:

< template >
  < div >
    < p > Child Component is active < / p >
  < / div >
< / template >

export default {
  data ( ) {
    return {
      info : ' Child Component Data '
    } ;
  } ,
  created ( ) {
    console.log ( ' Child Component Created ' ) ;
  } ,
  mounted ( ) {
    console.log ( ' Child Component Mounted ' ) ;
  } ,
  beforeUnmount ( ) {
    console.log ( ' Child Component is about to be destroyed ' ) ;
  } ,
  unmounted ( ) {
    console.log ( ' Child Component Destroyed ' ) ;
  }
} ;

در این مثال:

• هر بار که دکمه کلیک شود، کامپوننت ChildComponent ایجاد یا نابود می‌شود و خروجی پیام‌ها را در کنسول مشاهده می‌کنیم.

• این کار نشان می‌دهد که چگونه هر Lifecycle Hook در زمان‌های مختلف اجرا می‌شود و به شما امکان می‌دهد وضعیت کامپوننت را در طول چرخه حیات کنترل کنید.

موارد استفاده رایج Lifecycle Hooks

فراخوانی API در created: برای بارگذاری داده‌های اولیه، می‌توانید از created یا mounted استفاده کنید تا بلافاصله پس از ایجاد کامپوننت، داده‌ها بارگذاری شوند.

created ( ) {
  this.fetchData ( ) ;
}

دسترسی به DOM در mounted: اگر نیاز دارید به یک عنصر DOM دسترسی داشته باشید یا کتابخانه‌های خارجی مانند jQuery را اجرا کنید، این کار را در mounted انجام دهید.

mounted ( ) {
  this.initializeChart ( ) ;
}

پاکسازی در beforeUnmount: تایمرها، رویدادهای اضافه‌شده به DOM و سایر منابع خارجی را در این مرحله پاکسازی کنید تا از بروز مشکلات کارایی جلوگیری شود.

beforeUnmount ( ) {
  clearInterval ( this.intervalId ) ;
}

بهترین شیوه‌ها در استفاده از Lifecycle Hooks

• ]استفاده از mounted برای دسترسی به DOM: تنها در mounted به عناصر DOM دسترسی پیدا کنید، زیرا قبل از آن مرحله، عناصر DOM به طور کامل در صفحه قرار ندارند.

• محدود کردن عملیات سنگین در beforeUpdate و updated: عملیات‌های سنگین در این hooks می‌تواند منجر به کاهش عملکرد شود، بنابراین از آن‌ها برای عملیات‌های ساده استفاده کنید.

• پاکسازی در beforeUnmount: همیشه منابعی مانند تایمرها یا اتصالات وب‌سوکت را در این hook پاکسازی کنید تا از بروز حافظه‌های غیرضروری جلوگیری شود.

نتیجه‌گیری

Lifecycle Hooks در Vue.js ابزار قدرتمندی برای مدیریت چرخه حیات کامپوننت‌ها هستند. با درک و استفاده صحیح از هر hook، می‌توانید به طور موثری کنترل بیشتری بر روی ایجاد، بروزرسانی و نابودسازی کامپوننت‌های خود داشته باشید و برنامه‌هایی با کارایی بالا و قابل نگهداری تولید کنید. آشنایی با بهترین شیوه‌های استفاده از Lifecycle Hooks به شما کمک می‌کند تا پروژه‌های Vue.js خود را بهینه و ساختاریافته‌تر کنید.