This content originally appeared on DEV Community and was authored by Mukhriddin Khodiev (work)
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.definePropertybiror 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.definePropertyasosida 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:
Proxyobyekt darajasida kuzatish imkonini beradi, ya'ni butun obyektni "proxylash" mumkin va bu obyektning har qanday xususiyatiga kirish yoki uni o'zgartirish kuzatiladi.Qo'llash:
Proxyyangi xususiyatlar qo'shilganda yoki olib tashlanganda ham kuzatilishini ta'minlaydi.Vue3 da ishlatilishi: Vue 3 reaktivlik tizimi
Proxyasosida 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.definePropertyfaqat mavjud xususiyatlarni kuzatadi, yangi qo'shilgan xususiyatlarni avtomatik kuzatish qiyin.Proxyesa butun obyektni kuzatadi, shu jumladan yangi qo'shilgan xususiyatlarni ham.Performans:
Proxysamaraliroq bo‘lishi mumkin, chunki u obyektni bir marta proxylaydi va xususiyat darajasida ishlov bermaydi.Moslashuvchanlik:
Proxyko'proq moslashuvchan bo‘lib, turli xil operatsiyalarni (masalan, xususiyatni o‘chirish) kuzatish imkonini beradi.
Vue reaktivlik tizimidagi farqlar
Vue 2:
Object.definePropertyasosida qurilgan. Bu Vue 2 ning reaktivlik tizimini ba'zi cheklovlarga olib keladi, masalan, yangi xususiyatlarni kuzatishda muammo bor.Vue 3:
Proxyasosida 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://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-08T00:20:53+00:00) (JavaScript Proxy vs Object.define Property) Vue.js dagi reaktivlikni ortida nima turadi va qanday ishlaydi ?. Retrieved from https://www.scien.cx/2024/07/08/javascript-proxy-vs-object-define-property-vue-js-dagi-reaktivlikni-ortida-nima-turadi-va-qanday-ishlaydi/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.