Mengapakah Reflect mesti digunakan untuk Proksi dalam vue3?

Mereka yang telah menggunakan Vue tahu bahawa pelaksanaan respons Vue menggunakan Proksi, dan ia digunakan dengan Reflect Perkara yang paling ketara apabila melihat dokumen Proxy dan Reflect ialah kaedah statik objek Reflect mempunyai nama yang sama dengan nama yang sama. Kaedah proksi proksi, dan Reflect boleh mengendalikannya menggunakan objek, proksi boleh memproksi objek, tetapi saya tidak tahu mengapa kadang-kadang anda mesti menggunakan Reflect dalam kaedah proksi Proksi

Operasi asas

Kaedah statik objek Reflect mempunyai nama yang sama dengan kaedah proksi Proksi Terdapat 13 jenis Contoh get dan set adalah seperti berikut

const tempObj = { a: 1 };
Reflect.get(tempObj, 'a'); // 返回 1
Reflect.set(tempObj, 'a', 2); // 返回true 表示设置成功， a的值变2

const tempObj1 = { a: 1 };
const handler = {
  get: function (obj, prop, receiver) {
    return prop === 'a' ? 1000 : obj[prop];
  },
  set: function (obj, prop, value, receiver) {
    console.log(prop);
    obj[prop] = prop === 'a' ? 6 : value;
    return true;
  },
};
const proxyObj = new Proxy(tempObj1, handler);
proxyObj.a; // proxyObj => {a: 1000}
proxyObj.a = 2; // proxyObj => {a: 6}

Soalan

Jika Proksi tidak melakukan yang lain. operasi dan kembali secara langsung secara normal

const tempObj1 = { a: 1 };
const handler = {
  get: function (obj, prop, receiver) {
    return obj[prop];
  },
  set: function (obj, prop, value, receiver) {
    obj[prop] = value
    return true;
  },
};
const proxyObj = new Proxy(tempObj1, handler);
proxyObj.a; // proxyObj => {a: 1}
proxyObj.a = 2; // proxyObj => {a: 2}

Dalam situasi di atas, Proksi boleh diselesaikan tanpa Menggunakan Reflect untuk mengendalikan pemintasan adalah lebih mudah daripada menggunakan Reflect

Objek yang berbeza, objek dengan get

const tempObj1 = {
  a: 1,
  get value() {
    console.log(this === proxyObj); // false
    return this.a;
  },
};
const handler = {
  get: function (obj, prop, receiver) {
    return obj[prop];
  },
  set: function (obj, prop, value, receiver) {
    obj[prop] = value;
    return true;
  },
};
const proxyObj = new Proxy(tempObj1, handler);
proxyObj.value; // 1

Nilai yang dicetak dalam nilai di atas adalah palsu, Hasil yang dijangkakan harus benar, tetapi nilai objek asal yang digunakan dalam proksi harus diambil, jadi ini menunjuk ke objek asal , jadi nilainya palsu

Walaupun ini menunjukkan nilai yang salah, nilai yang diperolehi masih betul Ini Tiada sebab tertentu

const parent = {
  a: 1,
  get value() {
    console.log(this === child); // false
    return this.a;
  },
};
const handler = {
  get: function (obj, prop, receiver) {
    return obj[prop];
  },
  set: function (obj, prop, value, receiver) {
    obj[prop] = value;
    return true;
  },
};

const proxyObj = new Proxy(parent, handler);
const child = Object.setPrototypeOf({ a: 2 }, proxyObj);
child.value; // 1

Ada masalah. . Hasil keluaran adalah berbeza daripada apa yang dijangkakan Ini sepatutnya menunjuk kepada anak, tetapi ia menunjukkan kepada ibu bapa

Refleksi

Jika Reflect.get(obj, prop) digantikan dengan obj[prop] , maksudnya tak ada perubahan makna dan hasil adalah sama kan ada parameter penerima lain yang tidak berguna? kursus konsisten dengan jangkaan.

r tidak merujuk kepada objek proksi, mahupun objek asal, tetapi konteks pelaksanaan (ada pepatah bahawa tanpa mengubah ini dengan cara tertentu, Sesiapa yang memanggil menunjuk kepada siapa, ini adalah apa yang dijangkakan), di sini

memanggil

, jadi titik yang dijangkakan seharusnya this, di sini anda mungkin berfikir bahawa penggunaan terus receive tidak akan berfungsi, ini akan menyebabkan limpahan pelaksanaan, child Bersamaan dengan value , child belum dilaksanakan lagi, jika receiver[prop] dilaksanakan semula, ia akan terus dilaksanakan selama-lamanya Parameter receiver[prop] dalam child.valuechild.value telah diubah suai receiver[prop] tanpa menambah

, dan selepas menambahkannya menunjuk ke

Reflect.get(target, key, receiver)receiver Pastikan anda menggunakan this apabila this digunakan dalam objek proksi , dengan cara ini, kita boleh sentiasa mendapat nilai yang dijangkakantargetreceiver

Ringkasan

Objek proksi dalam vue3 mendapat nilai yang dijangkakan, dan ia dikumpulkan dan dikemas kini dalam pemintasan, jadi pastikan anda menggunakan

dalam fungsi pemintasan this untuk mengendalikan Reflect

Bagaimana anda sentiasa mendapat nilai yang dijangkakan seolah-olah tiada proksi

Atas ialah kandungan terperinci Mengapakah Reflect mesti digunakan untuk Proksi dalam vue3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!