Javascript Proxy obyekti haqida

JavaScriptda Proxy boshqa(target) bir obyektni o'rab turuvchi va o'sha obyektning fundamental metodlarini kuzatib boruvchi maxsus obyektdir.

Demak, yangi proxy obyekt yaratish uchun quyidagi usuldan foydalanamiz:

let proxy = new Proxy(target, handler);

Yuqoridagi kodda:

• target - o'rab olinuvchi obyekt
• handler - target obyektni nazorat qiladigan metodlardan tashkil topgan obyektdir

Oddiy bir misolni ko'rsak :

Xo'sh, user obyektini yaratib olamiz:

const user = {  
firstName: 'John', 
 lastName: 'Doe',
 email: john.doe@example.com',
}

Keyin esa, handler obyektini

const handler = {
  get(target, property) {
    console.log(`Property ${property} has been read.`);
    return target[property];
  }
}

Demak proxy obyektimiz tayyor:

const proxyUser = new Proxy(user, handler);

Shunda proxyUser user obyektini ma'lumot saqlash uchun ishlatadi, natijada proxyUser user obyektini to'liq nazorat qila olishi mumkin.

Nega Proxy Vue 3 da foydalanilgan?.

Vue 2.0 reaktiv ma'lumotlardagi o'zgarishlarni kuzatish uchun Object.defineProperty dan foydalangan. Object.defineProperty JavaScriptning eski xususiyati bo'lib, dasturchilar uchun obyektdagi yangi xususiyatlarni aniqlash yoki mavjud xususiyatlarni o'zgartirish imkonini bergan. Vue 2 da getter va setter funksiyalarini qo'shish uchun Object.definePropertydan foydalanagan, bu o'z navbatida, maʼlumotlarga kiritilgan oʻzgarishlarni kuzatish imkonini berardi.

Biroq, Object.defineProperty ba'zi kamchiliklarga ega. Asosiy kamchiliklardan biri shundaki, u faqat obyektning 1-qavatdagi xususiyatlari uchun ishlaydi. Agar siz ichma-ich obyektlardan tashkil topgan obyektga yangi xususiyat qo'shsangiz, u yangilanmaydi.Ya'ni bu harakat sezilmaydi. Bu holatda siz Vue.set yoki Vue.delete usullaridan foydalanishga majbur bo'lasiz, bu esa noqulay bo'lishi mumkin ba'zan.

Proxy bu muammoni bartaraf etadi, u har qanday turdagi obyektni o'zgarishlarini kuzata oladi, hoh bir qavatli bo'lsin, hoh ichma-ich qavatli.

Proxy Vue 3 da qanday ishlaydi?

Demak, Vue 3.0 da reaktiv tizim reaktiv ma'lumotlarga kiritilgan o'zgarishlarni kuzatish uchun proxydan foydalanishini bilib oldik. Vue 3.0 da reaktiv obyektni yaratganingizda, Vue asl obyektni o'rab turgan Proxy obyekt versiyasini yaratadi. Proxy obyekt obyektda bajarilgan barcha operatsiyalarni ushlaydi va qandaydir o'zgartirish kiritilganda Vue ga xabar beradi.

Masalan, quyidagi kodni ko'rib chiqing:

const data = { name: '1', age: 2 };
const reactiveData = reactive(data);

Ushbu kodda biz Vue tomonidan taqdim etilgan reactive() metod yordamida reaktiv obyektni yaratamiz. Bu paytda Vue proxy obyektini yaratadi va data obyektini o'rab oladi va unda bajariladigan barcha operatsiyalarni ushlaydi. Agar biz reactiveData obyektining xususiyatlariga murojaat qilsak, Vue operatsiyani ushlaydi va uni qiymatini qaytaradi.

console.log(reactiveData.name); // Output: '1'

Biz reactiveData.name xususiyatiga kirganimizda, Vue operatsiyani aniqlaydi va qiymatni qaytaradi. Biroq, agar biz obyekt qiymatini o'zgartirsak, Vue operatsiyani yana sezadi va shunga mos ravishda yangilanadi.

Ichki xususiyatlardagi o'zgarishlarni kuzatish

Yuqorida aytib o'tilganidek, Proxy aqlliroq, u Vue.set yoki Vue.delete usullaridan foydalanmasdan, obyektlarning ichki qavatdagi xususiyatlarini kuzatishni to'liq qo'llab-quvvatlaydi.

Masalan:

const data = { 
name: 'Tom', 
age: 25,
 address: { city: 'New York', state: 'NY' }
 };
const reactiveData = reactive(data);
reactiveData.address.zipcode = '10001';

Proxy aqlliroq API bo'lgani uchun, u Object.defineProperty kabi ma'lumotlar xususiyatlari uchun getter va setter funksiyalarini qo'shishi shart emas va barcha ichma-ich obyektlarda xususiyatlarni qo'lda rekursiv qayta ishlash shart emas. Bu samaradorlikka yordam berishi mumkin.

Proxy Object.definePropertyga qaraganda ancha moslashuvchandir. Proxy obyektlarga kirish, tayinlash va o'chirish kabi obyektlarda bajariladigan operatsiyalarni kuzatib borish imkonini beradi. Bu xususiyat dasturchilarga obyektlarga maxsus xatti-harakatlar qo'shish va ularni yanada kuchli va samarali qilish imkonini beradi.

Masalan,

const data = { name: 'Tom', age: 25 };
const reactiveData = reactive(data);
const handler = {
 set(target, key, value) {
  console.log(Setting ${key} to ${value});
  target[key] = value;
 },
};
const proxy = new Proxy(reactiveData, handler);
proxy.name = 'David';

Ushbu kodda biz proxy obyektida bajarilgan barcha o'rnatilgan operatsiyalarni kuzatib turuvchi va ishlov beruvchi obyektini yaratdik. Proxy obyektining name xususiyatini yangilaganimizda, ishlov beruvchi operatsiyani sezadi va konsolga xabarni qayd qiladi.

Xulosa

Xulosa qilib aytganda, proxy ECMAScript 6 da kiritilgan yangi xususiyat bo'lib, u dasturchilarga obyektlarda bajariladigan operatsiyalarni ushlab turish va sozlash imkonini beradi. Vue 3.0 reaktiv ma'lumotlarga kiritilgan o'zgarishlarni kuzatish uchun proxydan foydalanadi, bu esa yaxshi ishlash, moslashuvchanlik va obyektning barcha xususiyatlariga o'zgarishlarni, shu jumladan ichma-ich obyekt xususiyatlarni kuzatish imkonini beradi. Biroq, proxy ham Object.definePropertyga qaraganda ancha murakkab va undan foydalanish qiyinligini unutmasligimiz kerak bo'ladi.