005. Vue.js dagi reaktivlikni ortida nima turadi va qanday ishlaydi ? (JavaScript Proxy vs Object.define Property)

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