Vue ref data និង reactive data

ref

ref វាគឺ Short for reference សម្រាប់ផ្ទុក reactive data។ ហើយជាប្រភេទតំលៃដំបូងមានដូចជា number, string និង booleane ឬក៏ object។

ជាមួយ Number

<template>
  <div class="contain">
    <h1>Count: {{ count }}</h1>
  </div>
  
</template>
<script setup>
  import {ref} from 'vue'
  const count = ref(0)  

</script>

<template>
  <div class="contain">
    <h1>Count: {{ count }}</h1>
    <button @click="decrease">-</button>
    <button @click="increase">+</button>
  </div>
</template>

<script setup>
  import {ref} from 'vue'
  const count = ref(0)
  const increase = ()=>{
    count.value++
  } 
  const decrease = ()=>{
    count.value --
  } 

</script>

ជាមួយ String

<template>
  <div class="contain">
    <h1>Count: {{ count }}</h1>
    <p><b>{{ txt }}</b></p>

  </div>
  
</template>
<script setup>
  import {ref} from 'vue'
  const count = ref(0)  
  const txt = ref('Studey Vue with ref'

  )

</script>

<template>
  <div class="contain">
    <h1>Count: {{ count }}</h1>
    <p><b>{{ txt }}</b></p>
    <input type="text" v-model="txt">

  </div>
  
</template>
<script setup>
  import {ref} from 'vue'
  const count = ref(0)
  
  const txt = ref('Studey Vue with ref')

</script>

---

Reactive

The reactive function is used to create a reactive state for an object. It is particularly useful for complex objects or when you need to manage state with nested properties.

reactive ត្រូវជា object

reactive({object})

<template>
  <div class="contain">
     <h2>Nane: {{ people.name }}</h2>
     <h2>Gender: {{ people.gender }}</h2>
     <h2>Age: {{ people.age }} </h2>
  </div>
  
</template>
<script setup>
  import {ref, reactive} from 'vue'
  
  const people = reactive({
    name: 'Dul kaka',
    gender: 'male',
    age: 23,
  })
</script>

<template>
  <div class="contain">
     <h2>Nane: {{ people.name }}</h2>
     <h2>Gender: {{ people.gender }}</h2>
     <h2>Age: {{ people.age }} </h2>
     <button @click="increase">Age Increase</button>
  </div>
  
</template>
<script setup>
  import {ref, reactive} from 'vue'
  
  const people = reactive({
    name: 'Dul kaka',
    gender: 'male',
    age: 23,
  })
  const increase = ()=>{
    people.age++
  }
</script>