استفاده از Lifecycleها در عمل

Use Lifecycle in Practice

Vue.JS 2: استفاده از lifecycle ها در عمل - قسمت 26

در قسمت قبل در رابطه با lifecycle یا چرخه زندگی شیء Vue صحبت کردیم اما واقعا سوالی مطرح می شود: چرا باید چنین چیزهایی را بدانیم؟ آیا اصلا می توانیم از آن ها استفاده کنیم؟ چه فایده ای برای ما دارند؟ در این قسمت می خواهم با چند مثال ساده این موضوع را به شما توضیح بدهم تا فعلا با نحوه کار آن آشنا بشویم و در فصل های آینده و در پروژه های اصلی به سراغ استفاده های عملی از آن ها می رویم.

من یک کد اولیه و ساده را برای شما آماده کرده ام. قسمت HTML:

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <h1>{{ title }}</h1>
</div>

قسمت جاوا اسکریپت:

new Vue({
  el: '#app',
  data: {
    title: 'The VueJS Instance'
  }
});

برای اینکه هر کدام از مراحل در چرخه زندگی شیء Vue را ببینیم، می توانیم متدهایی را تعریف کنیم که در هر کدام از این مراحل اجرا شوند. توجه کنید که در ظاهر ما این متدها را تعریف کرده ایم اما اینچنین نیست. به کد زیر توجه کنید:

new Vue({
  el: '#app',
  data: {
    title: 'The VueJS Instance'
  },
  destroyed: function () {
    console.log('destroyed()');
  }
});

نکته بسیار مهم اینجاست که من هیچ کدام از این متدها را درون بخش methods قرار نداده ام. اگر بخواهیم متدهای خودمان را تعریف کنیم حتما آن را درون methods قرار می دهیم. به طور مثال:

// بقیه کدها //
  destroyed: function () {
    console.log('destroyed()');
  },
  methods: {
    myFunction: function () {
      // در این قسمت تابع شما کارش را  انجام میدهد
    }
  }
});

توابعی که در قسمت methods تعریف بشوند، همان متدهای ما هستند اما تابع destroyed که در کد بالا مشاهده می کنید درون این قسمت نیست بنابراین یکی از متدهای تعریف شده توسط من نیست! این واقعا همان lifecycle method ای است که در جلسه قبل با آن آشنا شده ایم. من کل شیء Vue خودم را با این متدها پر می کنیم و برای هر کدام یک دستور console.log می نویسم تا ترتیب اجرا شدن آن ها را ببینیم. کد ما بدین شکل خواهد شد:

new Vue({
  el: '#app',
  data: {
    title: 'The VueJS Instance'
  },
  beforeCreate: function () {
    console.log('beforeCreate()');
  },
  created: function () {
    console.log('created()');
  },
  beforeMount: function () {
    console.log('beforeMount()');
  },
  mounted: function () {
    console.log('mounted()');
  },
  beforeUpdate: function () {
    console.log('beforeUpdate()');
  },
  updated: function () {
    console.log('updated()');
  },
  beforeDestroy: function () {
    console.log('beforeDestroy()');
  },
  destroyed: function () {
    console.log('destroyed()');
  }
});

همانطور که می بینید تابع myFunction را حذف کرده ام چرا که با آن کاری نداریم. اگر کدهای بالا را ذخیره کنیم، برخی از lifecycle method ها را نمی بینیم. چطور؟ برای اینکه beforeUpdated و updated اجرا شوند باید چیزی تغییر کرده و به روز رسانی شود بنابراین تا زمانی که چیزی را تغییر ندهیم، مشاهده نمی شوند. همچنین به شما گفتم که شیء Vue تقریبا هیچ وقت از بین نمی رود (باید مدام خصوصیات ما را زیر نظر بگیرد تا متوجه تغییرات بشود) مگر اینکه خودمان کدی را بنویسیم تا آن را نابود کند. بنابراین برای اینکه تمام چرخه را ببینیم بهتر است دو دکمه برای این کار ها بنویسیم:

<div id="app">
  <h1>{{ title }}</h1>
  <button @click="title = 'Changed'">Update Title</button>
  <button @click="destroy">Destroy</button>
</div>

دکمه اول می گوید اگر روی آن کلیک شد مقدار title را به عبارت changed تغییر بده و دکمه دوم می گوید اگر روی آن کلیک شد متدی به نام Destroy را اجرا کن. من این متد را هنوز تعریف نکرده ام بنابراین به شیء Vue خودم می روم و آن را در انتهایش تعریف می کنم:

// بقیه کدها //
  beforeDestroy: function () {
    console.log('beforeDestroy()');
  },
  destroyed: function () {
    console.log('destroyed()');
  },
  methods: {
    destroy: function () {
      this.$destroy();
    }
  }
});

تابع destroy$ یکی از توابع خاص Vue است که یک شیء Vue را از بین می برد. حالا اگر کدهای بالا را اجرا کنید، چنین پیام هایی را در کنسول مرورگر خود خواهید دید:

متد های lifecycle اولیه برای ایجاد شیء Vue و نمایش محتوا به کاربر
متدهای lifecycle اولیه برای ایجاد شیء Vue و نمایش محتوا به کاربر

همانطور که انتظار می رفت beforeCreate سپس created سپس beforeMount و سپس mounted به همین ترتیب اجرا شده اند. حالا روی دکمه Update Title کلیک می کنم. با کلیک روی این دکمه موارد زیر هم اضافه می شوند:

lifecycle method های مربوط به به روز رسانی
lifecycle method های مربوط به به روز رسانی

باز هم طبق انتظار ما beforeUpdate و updated به ترتیب اجرا می شوند اما اینجا نکته مهمی وجود دارد. اگر دوباره روی Update Title کلیک کنیم چه می شود؟ اگر از قسمت قبل یادتان باشد، Vue مستقیما DOM را تغییر نمی دهد بلکه چیزی به نام Virtual DOM دارد و تنها در صورتی که Virtual DOM با DOM اصلی تفاوت داشته باشند، دست به تغییر DOM اصلی می زند. از آنجایی که مقدار title ما در حال حاضر changed است و با کلیک روی دکمه Update Title تغییر کرده و دوباره همان Changed می شود، هیچ چیزی در کنسول مشاهده نمی کنیم. در واقع Vue اصلا چیزی را به روز رسانی نمی کند.

توجه داشته باشید که برای درک این تصاویر باید حتما قسمت قبل را مطالعه کرده باشید. lifecycle یک شیء Vue به شکل زیر بود:

چرخه ی زندگی یک شیء Vue از لحظه ی تولد تا مرگ
چرخه زندگی یک شیء Vue از لحظه تولد تا مرگ

در نهایت با کلیک روی دکمه Destroy می توانیم شیء Vue خودمان را از بین ببریم و در کنسول هم همین مسئله را می بینیم:

lifecycle method های مربوط به حذف شیء Vue
lifecycle method های مربوط به حذف شیء Vue

زمانی که شیء ما destroy شود، به طور کامل از بین می رود. یعنی در مثال خودمان اگر برنامه را ریست کنیم (دوباره اجرا کنیم) و سپس کلید destroy را در همان ابتدا بزنیم، دیگر بقیه کدها (مانند دکمه Update Title) کار نمی کنند. چرا؟ به این دلیل که شیء Vue به طور کل از بین رفته است. البته از بین رفتن شیء Vue باعث برگشتن تغییرات ایجاد شده نمی شود (تغییرات قبلی دست نمی خورند) بلکه از آن لحظه به بعد دیگر ارتباطی بین آن شیء Vue و بقیه اجزاء کد HTML وجود نخواهد داشت.

در فصل بعدی به سراغ Vue CLI می رویم.

تمام فصل‌های سری ترتیبی که روکسو برای مطالعه‌ی دروس سری آموزش رایگان Vue js از صفر تا صد توصیه می‌کند:
نویسنده شوید
دیدگاه‌های شما

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.