Vue Method Computed Watch

នៅក្នុង Vue វាមាន method, computed និង watch យើងសិក្សាវាថាតើវាដំណើរការយ៉ាងដូចម្តេច

methods

គឺវា funtion ដែលបង្កើតសម្រាប់ធ្វើអ្វីមួយ ដូចខាងក្រោមនេះយើងធ្វើ funtion សម្រាប់ពេលយើងចុចលើប៊ូតុងនោះលេខកាន់តែកើន

<template>
  <div class="contain">
     <h2>Age: {{ age }} </h2>
     <button @click="increase(1)">Age Increase</button>
  </div>
  
</template>
<script setup>
  import {ref} from 'vue'
  
  const age = ref(0)
  const increase = n =>{
    age.value += n
  }

</script>

<style>
.contain{
  width: 300px;
  margin: auto;
}
</style>

Computed

computed properties ក្នុង Vue.js គឺជាអនុគមន៍ ដែលអនុញ្ញាតឱ្យអ្នកគណនាដោយស្វ័យប្រវត្តិពេលមានការផ្លាស់ប្តូរទិន្នន័យពាក់ព័ន្ធ។ ជាធម្មតា computed properties ត្រូវបានប្រើដើម្បីបង្កើតទិន្នន័យថ្មីដោយផ្អែកលើទិន្នន័យដែលមានស្រាប់ ដែលមិនចាំបាច់បញ្ចូលទៅក្នុង data ប៉ុន្តែត្រូវការក្នុងការបង្ហាញចេញនូវតម្លៃណាមួយដែលត្រូវបានគណនាមកវិញ។

computed ត្រូវបានប្រើសម្រាប់បង្កើតតម្លៃដែលបានគណនាប្រសិនបើតម្លៃអាស្រ័យ (dependent values) ផ្លាស់ប្តូរ។ វាជាប្រភេទ getter ដែលត្រូវបានគណនាប្រសិនបើអ្នកប្រើវាដូចជា getter ហើយវាត្រូវបានអាប់ដេតដោយស្វ័យប្រវត្តិ។

ធ្វើការបង្ហាញជាលេខគួរ និងលេខសេស

<template>
  <div class="contain">
     <h2>Age: {{ age }} </h2>
     <h2>ឆ្នាំ : {{ oddOrEven }}</h2>
     <button @click="increase(1)">Age Increase</button>
  </div>
  
</template>
<script setup>
  import {ref, computed} from 'vue'
  
  const age = ref(1)
  const increase = n =>{
    age.value += n
  }
  const oddOrEven = computed(()=>{
    if(age.value % 2 === 0) 
    return "គួរ"
    return "សេស"
  })
</script>

Watch

watch គឺជាវិធីសាស្ត្រមួយដែលអ្នកអាចធ្វើការផ្លាស់ប្តូរទិន្នន័យដែលស្វ័យប្រវត្តិ ចេញពីទិន្ន័យដែលមានស្រាប់ ។

<template>
  <div class="contain">
     <h2>Age: {{ age.num }} </h2>
     <h2>ឆ្នាំ {{ oddOrEven}} </h2>
     <button @click="increase(1)">Age Increase</button>
     <h2>អ្នកគឺជាមនុស្ស {{ age.status }}</h2>
  </div>
  
</template>

<script setup>
  import {reactive, computed, watch} from 'vue'
  
  const age = reactive({
    num: 1,
    status: 'តូច'
  })
  const increase = n =>{
    age.num += n
  }
  const oddOrEven = computed(()=>{
    if(age.num % 2 === 0) 
    return "គួរ"
    return "សេស"
  })
  watch(age, (newAge)=>{
      if(newAge.num >10) 
      return age.status = "ធំ"
  })
  
</script>

Note: ការប្រើ watch នៅពេលទិន្ន័យមានការប្រែប្រួលនៅខាងមុខ ព្រោះវាមានមុខងារតាមដាន និងឆ្លើយតបនៃការផ្លាស់ប្តូរទិន្ន័យនៅក្នុង server ។

<template>
  <div class="container mx-auto max-w-4xl mt-4" >
    <div v-for="d in filteredBooks" :key="d">
      <img :src="d.url +'.jpg' " alt="" :key="d.url">
    </div>
  </div>
</template>

<script setup>
import {ref , onMounted, watch} from 'vue'
import axios from 'axios';

const apiURL = 'https://script.google.com/macros/s/'
const key = 'AKfycbyw7J5wdqYcaCKeomE-ND4t-9u-xFCxATLfHmCpqXobDUAlqjVnWRQemeYm7igkibsN/exec'

const datas = ref([])
const filteredBooks = ref([])
const book_level = 4
onMounted(async()=>{
  try {
    const getData = await axios.get(apiURL+key)  
    const fbData = []
    getData.data.DATA.forEach(e => {
      const newData = {
        book: e.books,
        level : e.level, 
        url : e.url
      }
      fbData.push(newData)
    });
  
    datas.value = fbData

  } catch (error) {
      console.log(error)
  }
})

watch(datas,(newDatas)=>{
  filteredBooks.value = newDatas.filter(item => item.level === book_level) // Filter by book level
  console.log(filteredBooks.value)
  
})

</script>