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:
<template>
qismi: Bu yerda UI elementlar joylashadi.<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:
-
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('')
-
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://medium.com/@mukhriddinweb
🔗 https://dev.to/mukhriddinweb
🔗 https://github.com/mukhriddin-dev
Ulashish: