چرخه ی عمر (Lifecycle) Vue.js 3

چرخه ی عمر (Lifecycle) Vue.js 3

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

در این مقاله قصد داریم راجع به چرخه ی عمر در نسخه 3 از فریمورک Vue js صحبت کنیم. 

Hookهای چرخه ی عمرVue.js 

به طور کلی چرخه ی عمر در فریمورک Vue js شامل مراحل زیر است که برای دو نسخه 2 و 3 نشان داده شده است:

 

V2

V3

1

beforeCreate

beforeCreate

2

created

created

3

beforeMount

beforeMount

4

mounted

mounted

5

beforeUpdate

beforeUpdate

6

updated

updated

7

beforeDestroy

beforeUnmount

8

destroyed

unmounted

9

-

errorCaptured

10

-

renderTracked

11

-

renderTriggered

12

-

activated

13

-

deactivated

در شکل زیر چرخه عمر در نسخه 3 را نشان می دهد:

vue js 3 lifecycles
چرخه ی عمر در فریمورک Vue.js v3

دقت کنید که hook های beforeUnmount و unmounted در نسخه 3 در واقع همان hook های  beforeDestroy و destroyed در نسخه 2 هستند. با توجه به اینکه 8 مورد اول از جدول در هر دو نسخه 2 و 3 یکسان هستند نیازی به توضیح مجدد ندارد و کافی است که مقاله "چرخه عمر در Vuejs 2" را مطالعه کنید.

5 مورد از hook های نسخه 3 باقی می ماند که باید به تشریح هر یک بپردازیم. اما قبل از شروع توضیحات آن ها، این نکته را در نظر بگیرید که در این موارد باقی مانده، ترتیب وجود ندارد و هر کدام از آن ها در شرایط خاصی اتفاق می افتند.

  • activated، deactivated

اگر تا به حال از کامپوننت های پویا (dynamic component) استفاده کرده باشید حتماً متوجه شده اید که معمولاً یک کامپوننت به صورت فعال و بقیه به صورت غیرفعال هستند. در لحظه ای که یک کامپوننت فعال می شود در واقع activated شده است و این hook به صدا در می آید و به محض غیر فعال شدن این کامپوننت نیز hook دیگر یعنی deactivated صدا زده می شود.

  • errorCaptured

هنگامی که در یک کامپوننت در حال از بین رفتن، خطایی رخ می دهد، errorCaptured فراخوانی می شود. این hook سه آرگومان دریافت می کند: خطا، نمونه کامپوننتی که باعث بروز خطا شده است و رشته ای که حاوی اطلاعاتی است که در آن خطا ثبت شده است. hook می تواند false را برگرداند تا از بروز خطای بیشتر جلوگیری کند.

  • renderTracked

این hook زمانی فراخوانی می شود که در DOM مجازی که برای اولین بار رندر می شود dependency واکنش پذیر وجود داشته باشد. به عبارت خیلی ساده تر، هر وقت درون <template></template> از data های متغیر (مانند متغیرهای نوشته شده در آبجکت data، computed property ها و ...) استفاده شود renderTracked صدا زده می شود. اما اگر درون <template></template> از data ها استفاده ای نشود این hook فراخوانی نمی شود.

این hook یک آبجکت به صورت زیر بر می گرداند که در آن key همان متغیر است، target محلی است که متغیر از آنجا آمده و type نوع عملیات را مشخص می کند که برای گرفتن یک data از get استفاده می کند.

به مثال زیر دقت کنید:

 <div id="app">
  <button v-on:click="addToCart">Add to cart</button>
  <p>Cart({{ cart }})</p>
 </div>
 
const app = createApp({
 data() {
  return {
   cart: 0,
  };
 },
 renderTracked({ key, target, type }) {
  console.log({ key, target, type });
 },
 methods: {
  addToCart() {
   this.cart += 1;
  },
 },
});
app.mount('#app');

با توجه به اینکه درون template از یک data به اسم cart استفاده شده است، به محض mount شدن کامپوننت، renderTracked صدا زده می شود و آبجکت زیر را در کنسول نشان می دهد:

{
 key: "cart",
 target: {
  cart: 0
 },
 type: "get"
}
  • renderTriggered

این hook زمانی صدا زده می شود که درون DOM مجازی تغییراتی ایجاد شود که باعث رندر شدن مجدد آن شود. به محض رندر مجدد DOM این hook صدا زده می شود و مانند renderTracked یک آبجکت بر می گرداند. این hook قبل از hook، beforeUpdate صدا زده می شود. برای بررسی مشاهده نتایج بدست آمده در این hook نیز کافی است تکه کد زیر را به مثال قبلی اضافه کنید. در این صورت با هر بار کلیک روی دکمه موردنظر، renderTriggered یک بار صدا زده می شود و نتایج را نشان می دهد.

renderTriggered({ key, target, type }) {
 console.log({ key, target, type });
},

منبع:

https://v3.vuejs.org/api/options-lifecycle-hooks.html#activated

دوره در دست تالیف است ... rocket
کاربر میهمان

دوست گرامی شما به عنوان کاربر میهمان در سایت سکان آکادمی حضور دارید لطفاً برای ارسال دیدگاه ابتدا وارد حساب خود شوید

اگر login نکردی برامون ایمیلت رو بنویس: