هوک های چرخه حیات ​

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

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

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

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

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

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

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

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

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

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

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