Quelle est la fonction de « watch » dans Vue.js et comment ça marche ?

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:

qismi: Bu yerda UI elementlar joylashadi. 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:

Ismingiz: {{ name }}

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`) })

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. ?