Vue komponentida qanday lifecycle hook'lar mavjud?

Savol

Vue 3'da komponentning qanday lifecycle hook'lari mavjud va ular qachon chaqiriladi?

Qisqa javob

Composition API'dagi asosiy hook'lar: onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted — ular komponentning yaratilish, yangilanish va o'chirilish bosqichlarini aks ettiradi.

Batafsil javob

• onMounted — komponent DOM'ga joylashtirildi. Bu yerda DOM elementlarining ref'iga murojaat qilish, API'ga so'rov yuborish, tashqi hodisalarga obuna bo'lish xavfsiz.
• onUpdated — reaktiv ma'lumotlar o'zgargandan so'ng DOM yangilandi. Ehtiyotkorlik bilan ishlatish kerak — tasodifan cheksiz yangilanish siklini keltirib chiqarish mumkin.
• onUnmounted — komponent DOM'dan o'chirildi. Tozalash uchun joy: hodisa ishlovchilarini yechish, taymerlar/obunalarni bekor qilish (ularni o'tkazib yuborish tez uchraydigan xato — xotira sizib chiqishiga olib keladi).
• onBeforeMount/onBeforeUpdate/onBeforeUnmount — xuddi shu hodisalar, lekin o'zgarishlar qo'llanilishidan oldin.

<script setup> ichida bu hook'lar oddiy import qilinadigan funksiyalar bo'lib, komponent tanasida to'g'ridan-to'g'ri chaqiriladi (shartlar/sikllar ichida emas — Vue/React'dagi har qanday hook kabi).

Misol

<script setup>
import { onMounted, onUnmounted, ref } from 'vue'

const width = ref(window.innerWidth)

function handleResize() {
  width.value = window.innerWidth
}

onMounted(() => window.addEventListener('resize', handleResize))
onUnmounted(() => window.removeEventListener('resize', handleResize))
</script>

Qo'shimcha savollar

• Nega ishlovchilarni onUnmounted'da yechish kerak?
• Komponentning onMounted'i bilan composable ichidagi onMounted o'rtasida qanday farq bor?
• Lifecycle hook'lar <KeepAlive> bilan qanday ishlaydi (onActivated/onDeactivated)?