Vue — هوک های چرخه عمر (Lifecycle Hooks)

آخرین بروزرسانی: 1404/08/21

قبلی: expose (expose) بعدی: beforeCreate (beforeCreate)

هوک های چرخه عمر (Lifecycle Hooks)

هوک چرخه عمر (Lifecycle Hook) یعنی «زمان های مهم اجرای کامپوننت». هر هوک، مثل زنگ تفریح مدرسه، لحظه ای خاص است که می توانیم کد اجرا کنیم.

هوک ها در یک نگاه

ویو در مراحل مختلف اجرا، هوک های مشخصی دارد. مثلاً mounted یعنی «الان به DOM وصل شدی». بنابراین می توانیم به عناصر صفحه دسترسی بگیریم.

همچنین، beforeUpdate و updated مربوط به رندر دوباره اند. اولی قبل از رندر جدید است و دومی بلافاصله پس از به روزرسانی DOM است.

فهرست هوک ها طبق منبع

قبل ساخت: beforeCreate، ساخته شدن: created، قبل نصب: beforeMount، نصب شدن: mounted، قبل به روزرسانی: beforeUpdate، به روزرسانی شدن: updated، قبل حذف: beforeUnmount، حذف شدن: unmounted، خطاپذیری: errorCaptured، رهگیری رندر: renderTracked، تحریک رندر: renderTriggered، فعال سازی کش: activated، غیرفعال سازی کش: deactivated، رندر سمت سرور: serverPrefetch.

نمونه 1: اجرای امن بعد از نصب

در mounted به DOM دسترسی داریم. پس با خیال راحت عنصر می گیریم.

<template>
  <div>
    <h2>Lifecycle Demo</h2>
    <p id="status">Ready</p>
  </div>
</template>

<script>
export default {
  mounted() {
    const el = document.getElementById('status');
    if (el) {
      el.textContent = 'Mounted and DOM is ready!';
    }
    console.log('mounted called');
  },
  beforeUnmount() {
    console.log('cleanup before unmount');
  }
};
<\/script>

<style>
#status {
  font-weight: bold;
}
</style>

مشاهده در ادیتور

نمونه 2: تفاوت beforeUpdate و updated

در beforeUpdate هنوز DOM قبلی است. در updated DOM تازه شده است.

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="inc">Add</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    inc() {
      this.count += 1;
    }
  },
  beforeUpdate() {
    console.log('beforeUpdate: old DOM still visible');
  },
  updated() {
    console.log('updated: DOM is now refreshed');
  }
};
<\/script>

مشاهده در ادیتور