Rumah > Artikel > hujung hadapan web > Mari kita bincangkan tentang cara $set dilaksanakan dalam Vue?
Dalam pembangunan harian,
$set
juga merupakan API yang sangat praktikal, kerana teras tindak balas Vue2 adalah menggunakanObject.defineProperty
ES5 Apabila kita lulus Secara langsung mengubah suai tatasusunan subskrip untuk menukar tatasusunan atau menambah sifat baharu pada objek Pada masa ini, Object.defineproperty tidak boleh memantau perubahan dalam data Pada masa ini, semua orang akan menggunakan$set
untuk membenarkan operasi pengubahsuaian untuk bertindak balas , kita perlu tahu mengapa Seterusnya, mari kita lihat bagaimana $set dalam Vue dilaksanakan. [Cadangan berkaitan: tutorial video vuejs, pembangunan bahagian hadapan web]
let dataArr = ["item1"]; let dataObject = { name: "ccs" }; dataArr[2] = "item2"; dataObject.age = 22; 响应失败,页面没有显示更新新增的数据 this.$set(this.dataArr,2,'item2') this.$set(this.dataObject,'age',22) 响应成功,页面显示更新新增的数据
Seterusnya, mari kita lihat definisi $set dalam Vue
function set(target: Array<any> | Object, key: any, val: any): any { if ( process.env.NODE_ENV !== "production" && (isUndef(target) || isPrimitive(target)) ) { warn( `Cannot set reactive property on undefined, null, or primitive value: ${(target: any)}` ); } if (Array.isArray(target) && isValidArrayIndex(key)) { target.length = Math.max(target.length, key); target.splice(key, 1, val); return val; } if (key in target && !(key in Object.prototype)) { target[key] = val; return val; } const ob = (target: any).__ob__; if (target._isVue || (ob && ob.vmCount)) { process.env.NODE_ENV !== "production" && warn( "Avoid adding reactive properties to a Vue instance or its root $data " + "at runtime - declare it upfront in the data option." ); return val; } if (!ob) { target[key] = val; return val; } defineReactive(ob.value, key, val); ob.dep.notify(); return val; }
Dalam kod sumber, mula-mula tentukan sama ada sasaran set ialah undefined
dan 基本类型
. Jika ia undefined
atau 基本类型
, maka Ralat dilaporkan,
kerana pengguna tidak sepatutnya menetapkan perkara kepada jenis yang tidak ditentukan dan asas ,
dan kemudian menentukan sama ada sasaran adalah tatasusunan dan sama ada kunci ialah indeks undang-undang Indeks undang-undang bermakna nilai adalah Integer lebih besar daripada atau sama dengan 0,
adalah betul jika kedua-dua syarat adalah benar 目标数组调用splice方法插入或者修改数组
,
di sini splice
tidak. splice
biasa, ialah sambatan dalam puisi Wang Wei , ia adalah susunan sambatan
$set melaksanakan tindak balas pengubahsuaian tatasusunan Ia merupakan sebahagian daripada kaedah tatasusunan yang ditulis semula oleh proksi. . Penulisan semula proksi dalam vue bukan sekadar , terdapat tujuh kaedah
. Pertama,const arrayProto = Array.prototype export const arrayMethods = Object.create(arrayProto) const methodsToPatch = [ 'push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse' ] function def(obj, key, val, enumerable) { Object.defineProperty(obj, key, { value: val, enumerable: !!enumerable, writable: true, configurable: true }); } methodsToPatch.forEach(function (method) { const original = arrayProto[method] def(arrayMethods, method, function mutator (...args) { const result = original.apply(this, args) const ob = this.__ob__ let inserted switch (method) { case 'push': case 'unshift': inserted = args break case 'splice': inserted = args.slice(2) break } if (inserted) ob.observeArray(inserted) ob.dep.notify() return result }) })
melaksanakan kaedah tatasusunan asal dan memperoleh nilainya splice
Kemudian dinilai bahawa jika nilai ditambahkan pada tatasusunan push、pop、shift、unshift、splice、sort、reverse
const result = original.apply(this, args)
, nilai yang baru ditambah juga akan menjadi. dilaksanakan ,Langkah terakhirmendapatkan 响应式
tatasusunan ini dan mengedarkan serta mengemas kini dep dalam
. Jika anda ingin mengetahui lebih lanjut tentang responsif Vue, anda boleh menyemak artikel sebelumnya _ob_对象
_ob_
Pewawancara bertanya kepada anda tentang prinsip responsif Vue2. Bagaimana anda menjawab? - Nugget (juejin.cn)
Respons pelaksanaan objek
$set
Pertama sekali, dinilai bahawa jika atribut dikembalikan secara langsung dalam objek sasaran untuk menamatkan logik,
if (key in target && !(key in Object.prototype)) { target[key] = val; return val; } const ob = (target: any).__ob__; if (!ob) { target[key] = val; return val; } defineReactive(ob.value, key, val); ob.dep.notify(); return val;,
, vue akan menjadikan semua atribut dalam data responsif semasa pemulaan Jika nilai ialah objek atau tatasusunan, tika baharu akan disimpan dalam __ob__ ,
Jika anda ingin mengetahui lebih lanjut tentang responsif Vue, anda boleh menyemak artikel sebelumnya例如 let obj={} obj.name='ccs'
Observer
Pewawancara bertanya kepada anda tentang prinsip responsif Vue2, bagaimana anda menjawab? - Nuggets (juejin.cn) mendapat _ob_ objek ini untuk penghakiman Jika ia tidak wujud, ini bermakna ia adalah
objek biasa yang belum dimulakan oleh vue sebaliknya. daripada Objek respons
, jika tidak, tambahkan kaedah get dan tetapkan kaedah secara manual pada atribut melalui untuk melaksanakan respons , dan kemudian panggil defineReactive
secara manual dalam untuk menerbitkan kemas kini.
Ringkasandep
notify()
Kaedah $set dalam vue mengendalikan tatasusunan dan objek pada asasnya dengan cara yang sama Ia menambahkan respons kepada nilai baharu dan kemudian mencetuskan kemas kini penghantaran secara manual.
,
Video pengaturcaraan asasAtas ialah kandungan terperinci Mari kita bincangkan tentang cara $set dilaksanakan dalam Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!