Thuta Learning
ရှာဖွေရန်
IntermediateWeb Developmentbeginner

Lifecycle Hooks

စိတ်လျှော့ပါ။ ဒီခန်းကို စာအုပ်လိုမဟုတ်ဘဲ စကားပြောသလိုပဲ၊ နားလည်လွယ်အောင် ရှင်းပါမယ်။

ဒီခန်းပြီးရင် ဘာတတ်သွားမလဲ

  • Mount နှင့် unmount အချိန်ကိုနားလည်ရန်
  • Cleanup logic ရေးရန်

ရိုးရိုးလေး ရှင်းပြမယ်

Component တစ်ခု create, mount, update နှင့် unmount အဆင့်များကိုဖြတ်သန်းသည်။ DOM ကိုလိုအပ်သော code ကို onMounted တွင် run ပါ။ Timer, event listener နှင့် subscription များကို onUnmounted တွင်ရှင်းရမည်။

vue
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
const width = ref(0)
const measure = () => { width.value = window.innerWidth }

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

<template><p>Viewport: {{ width }}px</p></template>
You should see
Viewport: 1280px

လက်တွေ့စမ်းကြည့်ရန်

တစ်စက္ကန့်တိုင်းတိုးသော timer component ရေးပြီး unmount ဖြစ်လျှင် interval ကိုရှင်းပါ။

Lifecycle HooksVue.js

ဒီနေရာမှာ လူအများမှားတတ်တယ်

  • Event listener ကို cleanup မလုပ်ခြင်း
  • setup အတွင်း DOM element ကို mount မဖြစ်ခင် access လုပ်ခြင်း

လေ့ကျင့်ခန်း

တစ်စက္ကန့်တိုင်းတိုးသော timer component ရေးပြီး unmount ဖြစ်လျှင် interval ကိုရှင်းပါ။

You'll know it worked when: Viewport: 1280px

Lifecycle Hooks | Thuta Learning