This content originally appeared on DEV Community and was authored by Mukhriddin Khodiev (work)
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:
-
refbilan o'zgaruvchi e'lon qilish:refyordamida o'zgaruvchi yaratamiz. Bu o'zgaruvchi reaktsion bo'lib, uning qiymati o'zgarsa, Vue avtomatik ravishda komponentni qayta render qiladi.
const name = ref('')
-
watchfunksiyasi:watchfunksiyasi 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
This content originally appeared on DEV Community and was authored by Mukhriddin Khodiev (work)
Mukhriddin Khodiev (work) | Sciencx (2024-07-18T22:16:32+00:00) Vue.js da “watch” ning vazifasi va qanday ishlaydi ?. Retrieved from https://www.scien.cx/2024/07/18/vue-js-da-watch-ning-vazifasi-va-qanday-ishlaydi/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.