هوک‌های چرخه حیات - Lifecycle Hooks ​

هر نمونه کامپوننت Vue در هنگام ساخت مجموعه‌ای از مراحل را طی می‌کند - برای مثال، نیاز دارد که مشاهده‌گر داده را راه‌اندازی کند، کامپایل کردن تمپلیت، نمونه ساخته شده را به DOM منتقل کند و DOM را هنگام تغییر داده به‌روز کند. همچنین در طول این مسیر توابعی به نام هوک‌های چرخه‌ حیات اجرا می‌شوند که به کاربران امکان می‌دهند کد خود را در مراحل خاصی اضافه کند.

ثبت هوک‌های چرخه حیات ​

برای مثال هوک onMountedهوک mounted برای اجرای کد بعد از اینکه کامپوننت رِندر اولیه را به اتمام رساند و نودهای DOM ایجاد شدند مورد استفاده قرار می‌گیرد:

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  console.log(`شده است mount کامپوننت اکنون`)
})
</script>

export default {
  mounted() {
    console.log(`شده است mount کامپوننت اکنون`)
  }
}

هوک‌های دیگری وجود دارد که در مراحل مختلفی از چرخه حیات کامپوننت صدا زده می‌شوند که رایج‌ترین آنها هوک‌های onMounted و onUpdated و onUnmounted است.mounted و updated و unmounted است.

setTimeout(() => {
  onMounted(() => {
    // این کار نخواهد کرد
  })
}, 100)

نمودار چرخه حیات ​

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

برای کنکاش در جزئیات بیشتر در مورد هوک‌های چرخه حیات و موارد استفاده مربوطه به مرجع API هوک‌های چرخه حیاتمرجع API هوک‌های چرخه حیات مراجعه کنید.