Reactivity with ref() and reactive()

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

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

Primitive state အတွက် ref သုံးရန်
Object state အတွက် reactive သုံးရန်
Template auto-unwrapping ကိုနားလည်ရန်

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

ref() သည် တန်ဖိုးတစ်ခုကို reactive wrapper ထဲထည့်ပြီး JavaScript တွင် .value ဖြင့်ဖတ်/ရေးရသည်။ reactive() သည် object ကို proxy အဖြစ်ပြောင်းပေးသည်။ Template ထဲတွင် ref ကို .value မလိုဘဲ တိုက်ရိုက်သုံးနိုင်သည်။

vue

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

const count = ref(0)
const user = reactive({ name: 'Aye Aye', points: 10 })

function addPoint() {
  count.value++
  user.points += 5
}
</script>

<template>
  <button @click="addPoint">Clicks: {{ count }}</button>
  <p>{{ user.name }} — {{ user.points }} points</p>
</template>

You should see

Clicks: 1
Aye Aye — 15 points

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

Shopping cart quantity ကို ref ဖြင့်သိမ်းပြီး +/− button နှစ်ခုဖြင့် ပြောင်းလဲပါ။

Reactivity Fundamentals — Vue.js

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

Script ထဲတွင် ref ကို .value မပါဘဲ assign လုပ်ခြင်း
reactive object ကို object အသစ်ဖြင့် တိုက်ရိုက်အစားထိုးခြင်း

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

Shopping cart quantity ကို ref ဖြင့်သိမ်းပြီး +/− button နှစ်ခုဖြင့် ပြောင်းလဲပါ။

You'll know it worked when: Clicks: 1 Aye Aye — 15 points