Assalamu alaykum ! Vue.js da watch funksiyasi qanday ishlaydimva va vazifasi nima?

watch dan foydalanish juda qulay. watch funksiyasi Vue komponentida qaysidir ma'lumot (state) o'zgarishini kuzatib, kerakli vazifalarni bajarish imkonini beradi. Quyida oddiy misol orqali tushuntiraman:

1. <template> qismi: Bu yerda UI elementlar joylashadi.
2. <script setup> qismi: Bu yerda komponentning skript qismi joylashadi.

Keling, oddiy bir misolni ko'rib chiqaylik. Bu misolda biz bir input elementiga kiritilgan qiymatni kuzatamiz va har safar qiymat o'zgarganda console'ga log da elon qilamiz:

<template>
  <div>
    <input v-model="name" placeholder="Ismingizni kiriting">
    <p>Ismingiz: {{ name }}</p>
  </div>
</template>

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

// name o'zgaruvchisini e'lon qilamiz
const name = ref('')

// name o'zgaruvchisini kuzatamiz
watch(name, (newValue, oldValue) => {
  console.log(`Ism o'zgardi: ${oldValue} dan ${newValue} ga`)
})
</script>

Asosiy tushunchalar:

1. ref bilan o'zgaruvchi e'lon qilish: ref yordamida o'zgaruvchi yaratamiz. Bu o'zgaruvchi reaktsion bo'lib, uning qiymati o'zgarsa, Vue avtomatik ravishda komponentni qayta render qiladi.

   const name = ref('')

1. watch funksiyasi: watch funksiyasi birinchi argument sifatida kuzatiladigan o'zgaruvchini, ikkinchi argument sifatida esa callback funksiyani qabul qiladi. Callback funksiyasining birinchi argumenti yangi qiymat, ikkinchi argumenti esa eski qiymatdir.

   watch(name, (newValue, oldValue) => {
     console.log(`Ism o'zgardi: ${oldValue} dan ${newValue} ga`)
   })

watch funksiyasi yordamida siz har qanday reaktsion o'zgaruvchini (shu jumladan ref, reactive yoki computed o'zgaruvchilarni) kuzatishingiz mumkin. Bu metod komponentdagi ma'lumotlar o'zgarganda aniq amalni bajarishga imkon beradi.

Bizni tarmoqlarda kuzatishingiz mumkin va maqola foydali bo'lsa izoh va Vuechi do'stlaringizga ulashing. 🫡

🔗 https://t.me/mukhriddinweb
🔗 https://medium.com/@mukhriddinweb
🔗 https://dev.to/mukhriddinweb
🔗 https://khodieff.uz
🔗 https://github.com/mukhriddin-dev
🔗 https://linkedin.com/in/mukhriddin-khodiev
🔗 https://youtube.com/@mukhriddinweb