Bagaimana untuk memahami pemacu data vuejs

Dalam vuejs, dipacu data bermakna apabila data berubah, antara muka pengguna berubah dengan sewajarnya, dan pembangun tidak perlu mengubah suai DOM secara manual, ia menukar DOM dengan mengawal perubahan dalam data, membenarkan kandungan paparan (DOM) untuk berubah apabila data berubah.

Persekitaran pengendalian tutorial ini: sistem Windows 7, vue versi 2.9.6, komputer DELL G3.

1: Apakah itu Vue dan cara memahami Vue

Vue ialah rangka kerja berdasarkan halaman dipacu data mod MVVM, yang mengikat data pada paparan. Ia adalah teknologi untuk melaksanakan aplikasi satu halaman.

Beberapa ciri utama diringkaskan:

• Mudah

• Ringan

• Pantas

• Data dipacu

• Mesra modul

• Berkomponen

Vue bergantung pada pengikatan dua hala dipacu data untuk memudahkan kami membangunkan halaman tidak perlu mengubah suai DOM secara manual. Vue menjadikan segala-galanya lebih mudah dengan pengikatan data dua hala. Pengikatan dua hala dipacu datanya dilaksanakan melalui set data dan dapatkan prinsip fungsi yang ditakrifkan oleh Object.defineProperty().

2. Pembangunan berasaskan komponen menjadikan projek lebih berskala dan mudah alih, dan kod lebih boleh digunakan semula.

3. Pengalaman aplikasi satu halaman, komponen tempatan mengemas kini antara muka, menjadikan pengalaman pengguna lebih pantas dan menjimatkan masa.

Aplikasi satu halaman, juga dikenali sebagai SPA, mengehadkan semua aktiviti kepada satu halaman Web dan hanya memuatkan HTML, JavaScript dan CSS yang sepadan apabila halaman Web dimulakan. Selepas pemuatan selesai, halaman tidak lagi memuatkan semula atau melompat Hanya komponen atau modul di dalam berinteraksi dan melompat melalui cincangan atau api sejarah, dan menarik data melalui ajax untuk melaksanakan fungsi respons, jadi ia dipanggil halaman tunggal!

4 Kod js tidak kelihatan dan diseragamkan, dan kod yang dibangunkan melalui kerja berpasukan lebih mudah dibaca.

2: Apakah prinsip dipacu data Vue (pengikatan data dua hala)?

Apakah itu dipacu data

Terpacu data ialah ciri terbesar 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 menggunakan Object.defineProperty() untuk merampas penetap dan getter setiap sifat apabila data berubah. Terbitkan mesej kepada pelanggan dan cetuskan panggilan balik mendengar yang sepadan. Apabila anda menghantar objek Javascript biasa kepada contoh Vue sebagai pilihan datanya, Vue akan melelar melalui sifatnya dan menukarnya menjadi getter/setters menggunakan Object.defineProperty. 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 Ia menggunakan Observer untuk memantau perubahan data modelnya sendiri dan menggunakan Compile untuk menghuraikan dan menyusun arahan templat (vue in digunakan untuk menghuraikan {{}}), dan akhirnya menggunakan pemerhati untuk membina jambatan komunikasi antara pemerhati dan Compile untuk mencapai perubahan data -> melihat kemas kini interaktif (input) -> perubahan model data; kedua-dua arah Kesan pengikat.

Memahami getter/setter?

Apabila mencetak atribut dalam objek data di bawah contoh Vue, setiap atributnya mempunyai dua kaedah get dan set yang sepadan Seperti namanya, get adalah untuk pemerolehan nilai dan set adalah untuk tugasan ambil Nilai dan tugasan dilakukan menggunakan obj.prop, 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, kemudian tambahkan atribut nama 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 telah berubah, 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.

3: Rangka kerja MVVM

Pemacu data Vue.js dilaksanakan melalui rangka kerja MVVM. Rangka kerja MVVM terutamanya mengandungi tiga bahagian: model, view dan viewmodel.

• Model: merujuk kepada bahagian data, yang sepadan dengan bahagian depan yang setara dengan objek javascript

• Paparan: merujuk kepada paparan bahagian, yang sepadan dengan setara bahagian hadapan Dalam dom

• Viewmodel: ia ialah komunikasi perisian tengah yang menghubungkan pandangan dan data >Data (Model) dan pandangan (View) tidak boleh berkomunikasi secara langsung, tetapi komunikasi antara kedua-dua pihak perlu direalisasikan melalui ViewModel. Apabila data berubah, viewModel boleh memantau perubahan dan memberitahu paparan untuk membuat pengubahsuaian tepat pada masanya. Begitu juga, apabila peristiwa dicetuskan pada halaman, viewMOdel juga boleh mendengar acara dan memberitahu model untuk bertindak balas. Viewmodel adalah bersamaan dengan pemerhati, memantau tindakan kedua-dua pihak dan memberitahu pihak lain tepat pada masanya untuk melaksanakan operasi yang sepadan.

Cadangan berkaitan: "

tutorial vue.js

"

Atas ialah kandungan terperinci Bagaimana untuk memahami pemacu data vuejs. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!