Rumah > Artikel > hujung hadapan web > 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
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}
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.
memanggil, jadi titik yang dijangkakan seharusnya
, dan selepas menambahkannya menunjuk kethis
, di sini anda mungkin berfikir bahawa penggunaan terusreceive
tidak akan berfungsi, ini akan menyebabkan limpahan pelaksanaan,child
Bersamaan denganvalue
,child
belum dilaksanakan lagi, jikareceiver[prop]
dilaksanakan semula, ia akan terus dilaksanakan selama-lamanya Parameterreceiver[prop]
dalamchild.value
child.value
telah diubah suaireceiver[prop]
tanpa menambah
Ringkasan
Reflect.get(target, key, receiver)
receiver
Pastikan anda menggunakanthis
apabilathis
digunakan dalam objek proksi , dengan cara ini, kita boleh sentiasa mendapat nilai yang dijangkakantarget
receiver
Objek proksi dalam vue3 mendapat nilai yang dijangkakan, dan ia dikumpulkan dan dikemas kini dalam pemintasan, jadi pastikan anda menggunakandalam fungsi pemintasan
Bagaimana anda sentiasa mendapat nilai yang dijangkakan seolah-olah tiada proksithis
untuk mengendalikanReflect
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!