🏠 Home / Hub

🟢 Lesson 04 — Computed Properties & Watchers

← Back to Menu  |  🏠 Hub

1. Computed Properties

data တွေပေါ် အခြေခံပြီး တွက်ထုတ်တဲ့ values — data မပြောင်းမချင်း cache ထားတယ်

computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName
  },
  reversedMsg() {
    return this.message.split('').reverse().join('')
  }
}


Full name: {{ fullName }}

Upper: {{ upperName }}

Length: {{ fullName.length }} characters

Reversed: {{ reversedMsg }}

2. Computed vs Methods — ကွာခြားချက်

Computed = cached (data မပြောင်းမချင်း ထပ်မတွက်), Methods = always run

// Computed — cached ✅
computed: {
  expensive() { return heavyCalc(this.num) }
}

// Methods — called every render ⚠️
methods: {
  expensive() { return heavyCalc(this.num) }
}

✅ computed (cached)

Run count: {{ computedCount }}

Value: {{ computedDouble }}

⚠️ method (always runs)

Run count: {{ methodCount }}

Value: {{ methodDouble() }}


3. Computed Getter + Setter

computed: {
  fullName: {
    get() { return this.first + ' ' + this.last },
    set(val) {
      [this.first, this.last] = val.split(' ')
    }
  }
}

First:   Last:

Full (computed get): {{ fullName }}

Edit full directly (computed set):

4. watch — Watching Data Changes

data တစ်ခုပြောင်းတာကို ကြည့်ပြီး side effect (API call, log, etc.) လုပ်ဖို့

watch: {
  searchTerm(newVal, oldVal) {
    console.log('Changed from', oldVal, 'to', newVal)
    this.doSearch(newVal)  // e.g. fetch API
  }
}

Searching for: {{ searchTerm }}

{{ l }}
Watch log appears here...

5. watch: immediate & deep

watch: {
  // immediate: true → mount ဖြစ်ချင်းတည်း run
  count: {
    handler(val) { ... },
    immediate: true
  },

  // deep: true → nested object ကို watch လုပ်
  user: {
    handler(val) { ... },
    deep: true
  }
}

User name:   Age:

{{ l }}

6. Computed — Filter & Sort (Real Use Case)

 

Showing {{ filteredUsers.length }} of {{ people.length }} users

{{ u.id }} {{ u.name }} — Age: {{ u.age }}

No results found.

← Lesson 03  |  Next: Lesson 05 → Components

📌 Study Checklist