Vue kuzatuvchilari (watchers)
Kuzatuvchi - bir xil nomdagi ma’lumotlar xususiyatini kuzatuvchi metod.
Har safar ma’lumotlar xususiyati qiymati o‘zgarganda kuzatuvchi ishlaydi.
Agar ma’lum bir ma’lumot xususiyati qiymati amalni talab qilsa, kuzatuvchidan foydalaning.
Kuzatuvchi kontseptsiyasi
Kuzatuvchilar - bu biz o‘rganadigan Vue misolidagi to‘rtinchi konfiguratsiya variantidir. Biz ko‘rib chiqqan dastlabki uchta konfiguratsiya opsiyasi bu "ma’lumotlar", "usullar" va "hisoblangan".
"Ma’lumotlar"da bo‘lgani kabi, "usullar" va "hisoblangan" kuzatuvchilar ham Vue misolida ajratilgan nomga ega: "tomosha qilish".
Sintaksis
const app = Vue.createApp({
data() {
...
},
watch: {
...
},
computed: {
...
},
methods: {
...
}
})
Yuqoridagi yashil maydonda aytib o‘tilganidek, kuzatuvchi xuddi shu nomdagi ma’lumotlar xususiyatini kuzatadi.
Biz hech qachon kuzatuvchi usulini chaqirmaymiz. U faqat xususiyat qiymati o‘zgarganda avtomatik ravishda chaqiriladi.
Yangi xususiyat qiymati har doim kuzatuvchi usuliga kirish argumenti sifatida mavjud va eski qiymat ham.
Misol
<input type="range"> elementi "rangeVal" qiymatini o‘zgartirish uchun ishlatiladi. Kuzatuvchi foydalanuvchining noqonuniy deb hisoblangan 20 dan 60 gacha qiymatlarni tanlashiga yo‘l qo‘ymaslik uchun ishlatiladi.
<input type="range" v-model="rangeVal">
<p>{{ rangeVal }}</p>
const app = Vue.createApp({
data() {
rangeVal: 70
},
watch: {
rangeVal(val){
if( val>20 && val<60) {
if(val<40){
this.rangeVal = 20;
}
else {
this.rangeVal = 60;
}
}
}
}
})
O‘zingiz sinab ko‘ring »
Yangi va eski qadriyatlarga ega bo‘lgan kuzatuvchi
Yangi xususiyat qiymatiga qo‘shimcha ravishda, oldingi xususiyat qiymati ham kuzatuvchi usullariga kirish argumenti sifatida avtomatik ravishda mavjud bo‘ladi.
Misol
Biz <div> elementida sichqoncha ko‘rsatgichining x-pozitsiyasini "xPos"ni "updatePos" usuli bilan yozib olish uchun bosish hodisasini o‘rnatdik. Kuzatuvchi eski va yangi kiritish argumentlaridan foydalangan holda yangi x-pozitsiya va oldingi o‘rtasidagi piksellardagi farqni kuzatuvchi usuliga hisoblab chiqadi.
<div v-on:click="updatePos"></div>
<p>{{ xDiff }}</p>
const app = Vue.createApp({
data() {
xPos: 0,
xDiff: 0
},
watch: {
xPos(newVal,oldVal){
this.xDiff = newVal-oldVal
}
},
methods: {
updatePos(evt) {
this.xPos = evt.offsetX
}
}
})
O‘zingiz sinab ko‘ring »
Shuningdek, biz yangi va eski qiymatlardan foydalanuvchiga kiritilgan ma’lumotlar noto‘g‘ri bo‘lgandan to‘g‘rigacha bo‘lgan vaqtda fikr bildirish uchun foydalanishimiz mumkin:
Misol
<input> elementidan olingan qiymat kuzatuvchiga ulangan. Agar qiymat "@" belgisini o‘z ichiga olsa, u haqiqiy elektron pochta manzili hisoblanadi. Foydalanuvchiga kiritilgan ma’lumotlar to‘g‘ri, noto‘g‘ri yoki oxirgi marta bosish bilan haqiqiy bo‘lganligi haqida xabar berish uchun fikr-mulohaza matni keladi.
<input v-type="email" v-model="inpAddress">
<p v-bind:class="myClass">{{ feedbackText }}</p>
const app = Vue.createApp({
data() {
inpAddress: '',
feedbackText: '',
myClass: 'invalid'
},
watch: {
inpAddress(newVal,oldVal) {
if( !newVal.includes('@') ) {
this.feedbackText = 'The e-mail address is NOT valid';
this.myClass = 'invalid';
}
else if( !oldVal.includes('@') && newVal.includes('@') ) {
this.feedbackText = 'Perfect! You fixed it!';
this.myClass = 'valid';
}
else {
this.feedbackText = 'The e-mail address is valid :)';
}
}
}
})
O‘zingiz sinab ko‘ring »
Kuzatuvchilar va usullar
Kuzatuvchilar va usullar ikkalasi ham funksiyalar sifatida yozilgan, ammo juda ko‘p farqlar mavjud:
- Metodlar HTML dan chaqiriladi.
- Voqea sodir bo‘lganda usullar ko‘pincha chaqiriladi.
- Methods avtomatik ravishda hodisa (event) obyektini kirish sifatida qabul qiladi.
- Usulga kirish sifatida tanlagan boshqa qiymatlarni ham yuborishimiz mumkin.
- Kuzatuvchilar faqat kuzatilgan ma’lumotlar xususiyati qiymati o‘zgarganda chaqiriladi va bu avtomatik ravishda sodir bo‘ladi.
- Kuzatuvchilar avtomatik ravishda tomosha qilingan xususiyatdan yangi va eski qiymatni oladi.
- Biz kirish sifatida kuzatuvchi bilan boshqa qiymatlarni yuborishni tanlay olmaymiz.
Watchers va kompyuter xususiyatlari
Kuzatuvchilar va hisoblangan xususiyatlar funksiya sifatida yoziladi.
Kuzatuvchilar va hisoblangan xususiyatlar, qaramlik o‘zgarganda avtomatik ravishda chaqiriladi va hech qachon HTMLdan chaqiriladi.
Hisoblangan xususiyatlar va kuzatuvchilar o‘rtasidagi ba’zi farqlar:
- Kuzatuvchilar faqat bitta xususiyatga, ular tomosha qilish uchun o‘rnatilgan xususiyatga bog‘liq.
- Hisoblangan xususiyatlar ko‘p xususiyatlarga bog‘liq bo‘lishi mumkin.
- Hisoblangan xususiyatlar dinamik xususiyatdan tashqari ma’lumotlar xususiyatlari kabi ishlatiladi.
- Kuzatuvchilar HTML dan havola qilinmaydi.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!