Apakah prinsip terpacu data bagi vue

Prinsip terdorong data bagi vue ialah: menggunakan rampasan data digabungkan dengan model penerbit dan pelanggan, menggunakan "Object.defineProperty()" untuk merampas penetap dan penerima setiap harta, dan menerbitkan mesej kepada pelanggan apabila data berubah. Cetuskan panggilan balik pendengaran yang sepadan.

Persekitaran pengendalian artikel ini: sistem Windows 10, versi Vue 2.9.6, komputer DELL G3.

Apakah prinsip terpacu data bagi vue

Apakah yang dipacu data

Terpacu data adalah yang terbesar ciri vue.js. Dalam vue.js, apa yang dipanggil dipacu data bermakna apabila data berubah, antara muka pengguna berubah dengan sewajarnya dan pembangun tidak perlu mengubah suai DOM secara manual.

Sebagai contoh, jika kita mengklik butang, teks elemen perlu ditukar antara ya dan tidak. Dalam jquery, apabila mengubah suai halaman, kami biasanya mengikuti proses ini Kami mengikat peristiwa pada butang, kemudian mendapatkan objek dom elemen yang sepadan dengan salinan, dan kemudian mengubah suai nilai salinan objek dom mengikut suis.

Jadi bagaimanakah vuejs mencapai pemacu data ini?

Vue melaksanakan pengikatan data dua hala terutamanya dengan menggunakan rampasan data digabungkan dengan model penerbit-pelanggan dan rampasan penyetel dan pemeroleh setiap sifat melalui Object.defineProperty( When data). perubahan, mesej diterbitkan kepada pelanggan dan mencetuskan panggilan balik pendengaran yang sepadan.

Apabila objek Javascript biasa dihantar ke tika Vue sebagai pilihan datanya, Vue akan melelar melalui sifatnya dan menggunakan Object.defineProperty untuk menukarnya menjadi getter/setters. Getter/setter tidak kelihatan kepada pengguna, tetapi secara dalaman ia membenarkan Vue menjejak kebergantungan dan memberitahu perubahan apabila sifat diakses dan diubah suai.

Pengikatan data dua hala Vue menggunakan MVVM sebagai pintu masuk kepada pengikatan data, menyepadukan Observer, Compile dan Watcher, menggunakan Observer untuk memantau perubahan data model anda sendiri dan menggunakan Compile untuk menghuraikan dan menyusun arahan templat ( vue digunakan untuk menghuraikan {undefined{}}), dan akhirnya menggunakan pemerhati untuk membina jambatan komunikasi antara pemerhati dan Compile untuk mencapai perubahan data -> melihat kemas kini melihat perubahan interaktif (input) -> perubahan model data Kesan mengikat dua hala; .

Pemahaman tentang getter/setter?

Apabila mencetak atribut dalam objek data di bawah tika Vue, setiap atributnya mempunyai dua kaedah get dan set yang sepadan Seperti namanya, get ialah nilai dan tetapkan Untuk tugasan, dalam keadaan biasa, kami menggunakan obj.prop untuk mendapatkan dan menetapkan nilai, tetapi terdapat masalah dengan ini. Bagaimanakah saya tahu bahawa nilai objek telah berubah? Jadi giliran set untuk muncul. Anda boleh memahami get dan set sebagai fungsi Apabila kita memanggil sifat objek, kita akan memasukkan get.property(){...} dan mula-mula menentukan sama ada objek itu mempunyai sifat ini. Dan tetapkan nilai kepadanya; jika terdapat atribut nama, kembalikan atribut nama. Anda boleh menganggap get sebagai fungsi yang mengambil nilai, dan nilai pulangan fungsi itu ialah nilai yang diperolehinya. Apa yang saya rasa lebih penting ialah atribut set Apabila menetapkan nilai kepada contoh: Pada masa ini, ia akan memasukkan nama set(val){...}; . Dalam fungsi ini, anda boleh melakukan banyak perkara, seperti mengikat dua hala! Kerana setiap perubahan nilai ini mesti melalui set, ia tidak boleh diubah oleh kaedah lain, yang bersamaan dengan pendengar universal. Prototaip objek ES5 mempunyai dua atribut baharu __defineGetter__ dan __defineSetter__, yang digunakan secara khusus untuk mengikat get dan set kepada objek. Adalah disyorkan untuk menggunakan kaedah berikut, kerana ia ditulis pada prototaip, jadi ia boleh diwarisi dan digunakan semula.

[Cadangan berkaitan: "tutorial vue.js"]

Atas ialah kandungan terperinci Apakah prinsip terpacu data bagi vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!