🟢 Lesson 06 — Lifecycle Hooks

1. Vue Lifecycle — Overview

Component တစ်ခု ဖန်တီး → mount → update → destroy ဖြစ်တဲ့ အဆင့်တိုင်းမှာ hook function တွေ ပါတယ်

const app = Vue.createApp({
  // 🟢 CREATION
  beforeCreate() { /* data မရသေး */ },
  created()      { /* data ရပြီ, DOM မရသေး → fetch API လုပ်ဖို့ good */ },

  // 🔵 MOUNTING
  beforeMount()  { /* DOM ထဲ ထည့်တော့မယ် */ },
  mounted()      { /* DOM ထဲ ထည့်ပြီး → DOM manipulation, setInterval */ },

  // 🟠 UPDATING
  beforeUpdate() { /* data ပြောင်း, DOM မ re-render သေး */ },
  updated()      { /* DOM re-render ပြီး */ },

  // 🔴 UNMOUNTING
  beforeUnmount(){ /* destroy တော့မယ် → cleanup */ },
  unmounted()    { /* ပြီးသွားပြီ → clearInterval လုပ်ဖို့ */ }
})

2. Live Lifecycle Logger

Component တွေ mount/unmount လုပ်ကြည့်ပြီး lifecycle hooks တွေ မြင်ကြည့်ပါ

3. created() — Simulated API Fetch

created() မှာ API call လုပ်တာ အသုံးများဆုံး pattern

created() {
  // Component ဖန်တီးလိုက်ချင်းချင်း data ယူတယ်
  fetch('https://api.example.com/users')
    .then(r => r.json())
    .then(data => { this.users = data })
}

4. mounted() + unmounted() — Timer Example

mounted() မှာ setInterval ဖန်တီး → unmounted() မှာ clearInterval လုပ်ရမယ် (memory leak မဖြစ်ဖို့)

mounted() {
  this.timer = setInterval(() => {
    this.seconds++
  }, 1000)
},
unmounted() {
  clearInterval(this.timer)  // IMPORTANT! always cleanup
}

5. mounted() + $refs — DOM Access

mounted() မှာ DOM ကို access လုပ်လို့ရတယ် — $refs နဲ့ element တိုက်ရိုက်ကိုင်ဆောင်

<input ref="myInput">

mounted() {
  this.$refs.myInput.focus()  // auto-focus on mount
}