Assalamu alaykum! ahli O’zbek Vue community! Keling bugun Vue.js da reaktivlik qanday ishlaydi , minde sizlarga tushuntirsam :)
Bismillah!
Hamma gap JavaScriptda , ya’ni Object.defineProperty
va Proxy
JavaScript-da obyektlarni manipulyatsiya qilish va eshitish uchun ishlatiladigan ikki xil mexanizmdir. **Vue2 ** va Vue3 reaktivlik tizimlarida bu ikkalasi qanday qo’llanilishi haqida gaplashamiz.
Object.defineProperty
Xususiyatlari
-
Xususiyatlar holatini kuzatish:
Object.defineProperty
biror obyektda mavjud bo’lgan xususiyatlarni (property) larni kuzatish uchun ishlatiladi. Bu xususiyatlarni o’qish va yozish uchun getter va setterlarni belgilash imkonini beradi. -
**Biroz cheklov bor aynan bu metodda **: Bu usul faqat mavjud xususiyatlar uchun ishlaydi va yangi xususiyatlar (property) qo’shilganda avtomatik kuzatilmaydi.
-
Vue2 da ishlatilishi: Vue2 reaktivlik tizimi
Object.defineProperty
asosida qurilgan. Bu har bir xususiyat uchun getter va setterlarni yaratish orqali o’zgarishlarni kuzatadi.
Misol
let data = {};
Object.defineProperty(data, 'count', {
get() {
console.log('Getting value');
return count;
},
set(newValue) {
console.log('Setting value');
count = newValue;
}
});
data.count = 5; // Setting value
console.log(data.count); // Getting value
Proxy
Xususiyatlari
-
Obyekt holatini kuzatish:
Proxy
obyekt darajasida kuzatish imkonini beradi, ya’ni butun obyektni “proxylash” mumkin va bu obyektning har qanday xususiyatiga kirish yoki uni o’zgartirish kuzatiladi. -
Qo’llash:
Proxy
yangi xususiyatlar qo’shilganda yoki olib tashlanganda ham kuzatilishini ta’minlaydi. -
Vue3 da ishlatilishi: Vue 3 reaktivlik tizimi
Proxy
asosida qurilgan. Bu Vue2 ga nisbatan samarali va kengroq ko’lamli kuzatish imkonini beradi.
Misol
let data = {
count: 0
};
let proxyData = new Proxy(data, {
get(target, property) {
console.log(`Getting ${property}`);
return target[property];
},
set(target, property, value) {
console.log(`Setting ${property} to ${value}`);
target[property] = value;
return true;
}
});
proxyData.count = 5; // Setting count to 5
console.log(proxyData.count); // Getting count
Object.defineProperty
va Proxy
taqqoslash
-
Kuzatishning ko’lamini:
Object.defineProperty
faqat mavjud xususiyatlarni kuzatadi, yangi qo’shilgan xususiyatlarni avtomatik kuzatish qiyin.Proxy
esa butun obyektni kuzatadi, shu jumladan yangi qo’shilgan xususiyatlarni ham. -
Performans:
Proxy
samaraliroq bo‘lishi mumkin, chunki u obyektni bir marta proxylaydi va xususiyat darajasida ishlov bermaydi. -
Moslashuvchanlik:
Proxy
ko’proq moslashuvchan bo‘lib, turli xil operatsiyalarni (masalan, xususiyatni o‘chirish) kuzatish imkonini beradi.
Vue reaktivlik tizimidagi farqlar
-
Vue 2:
Object.defineProperty
asosida qurilgan. Bu Vue 2 ning reaktivlik tizimini ba’zi cheklovlarga olib keladi, masalan, yangi xususiyatlarni kuzatishda muammo bor. -
Vue 3:
Proxy
asosida qurilgan. Bu Vue 3 ning reaktivlik tizimini yanada kuchli va samarali qiladi, shu jumladan yangi xususiyatlarni va murakkab strukturalarni oson kuzatish imkonini beradi.
Yuqoridagi misollar Vue2 va Vue3 ning reaktivlik tizimlarining qanday ishlashini va qaysi texnologiyalarni qo’llaganligini ko’rsatadi. Bu farqlar Vue3 ni Vue2 ga nisbatan yanada kuchliroq va flexibility qiladi.
Quyida bu haqida rasmlarda ko’rib chiqamiz batafsil!
Barakalloh fiikum!
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: