Apakah dua teras vuejs

Dua teras vuej ialah sistem dipacu data dan komponen. Didorong data ialah pengikatan data dua hala, yang digunakan untuk memastikan ketekalan data dan paparan. Sistem komponen boleh mengabstrakkan halaman ke dalam beberapa modul yang agak bebas; ia boleh merealisasikan penggunaan semula kod, meningkatkan kecekapan pembangunan dan kualiti kod, dan memudahkan penyelenggaraan kod.

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

Dua teras vue.js: 1. Didorong data------------- 2. Sistem komponen

1. Pemacu Data, iaitu, pengikatan data dua hala

Selepas data berubah, halaman akan dipaparkan semula Ini adalah responsif Vue. Jadi bagaimana semua ini dilakukan?

Untuk melengkapkan proses ini, kita perlu:

• Mengesan perubahan data
• Mengumpul data yang bergantung pada paparan
• Apabila data berubah , Secara automatik "memberitahu" bahagian paparan yang perlu dikemas kini dan mengemas kininya

Pepatah profesional yang sepadan ialah:

• Rampasan data/proksi data
• Koleksi kebergantungan
• Mod terbitkan dan langgan

Dalam erti kata lain: Teras tindak balas Vue ialah kebergantungan akan dikumpul semasa pengambil dan kemas kini kebergantungan akan dicetuskan semasa penetap

vue akan Merentasi semua sifat , objek dalam data dan menggunakan Object.defineProperty untuk menukar semua sifat ini menjadi pengambil/penetap.

Penetap/penetap ini tidak kelihatan kepada pengguna, tetapi secara dalaman mereka membenarkan Vue menjejak kebergantungan dan memaklumkan perubahan apabila harta itu diakses dan diubah suai .

Setiap tika komponen sepadan dengan tika pemerhati, yang merekodkan sifat data "disentuh" ​​sebagai kebergantungan semasa proses pemaparan komponen.

Kami akan mengumpul kebergantungan semasa pengumpulan Ketergantungan ialah pengumpulan pemerhati perubahan data langganan Tujuan pengumpulan kebergantungan adalah untuk apabila data responsif berubah, ia boleh memberitahu pelanggan yang sepadan. Logik berkaitan proses. Kemas kini kebergantungan akan dicetuskan apabila

setter dicetuskan kemudian, apabila setter kebergantungan dicetuskan , akan memberitahu pemerhati , supaya ia. komponen yang berkaitan akan dipaparkan semula .

Ringkasan:

1) Prinsip:

Apabila mencipta contoh Vue, vue akan merentasi sifat pilihan data dan menggunakan Object.defineProperty sebagai harta Tambah getter dan setter untuk merampas bacaan data (getter digunakan untuk pengumpulan kebergantungan dan setter digunakan untuk menghantar kemas kini), dan menjejaki dependensi secara dalaman untuk memberitahu perubahan apabila sifat diakses dan diubah suai.

Setiap tika komponen akan mempunyai tika pemerhati yang sepadan, yang akan merekodkan semua atribut data kebergantungan semasa proses pemaparan komponen (pengumpulan kebergantungan, pemerhati yang dikira, kejadian pemerhati pengguna), dan kemudian kebergantungan ditukar Apabila tiba masanya, kaedah penetap akan memberitahu tika pemerhati yang bergantung pada data ini untuk mengira semula (kemas kini penghantaran),

, dengan itu memaparkan semula komponen yang berkaitan.

2) Proses pelaksanaan:

Kita sudah tahu bahawa untuk melaksanakan pengikatan dua hala data, kita mesti terlebih dahulu merampas dan memantau data, jadi kita perlu menyediakan Pemerhati untuk memantau semua sifat-sifat. Jika atribut berubah, anda perlu memberitahu Pemerhati pelanggan untuk melihat sama ada ia perlu dikemas kini.

Oleh kerana terdapat ramai pelanggan, kami memerlukan Dep pelanggan mesej untuk mengumpulkan pelanggan ini secara khusus, dan kemudian menguruskan mereka secara seragam antara Pemerhati dan Pemerhati. Seterusnya, kami juga memerlukan penghurai arahan, Compile, untuk mengimbas dan menghuraikan setiap elemen nod,

untuk memulakan perintah yang berkaitan menjadi Pemerhati pelanggan, dan menggantikan data templat atau mengikat fungsi yang sepadan Pada masa ini, apabila Pemerhati pelanggan menerima perubahan atribut yang sepadan, ia akan melaksanakan fungsi kemas kini yang sepadan untuk mengemas kini paparan. Oleh itu, kami seterusnya melaksanakan tiga langkah berikut untuk mencapai pengikatan dua hala data:

1. Laksanakan listener Observer untuk merampas dan memantau semua atribut, dan memberitahu pelanggan jika terdapat perubahan.

2. Laksanakan Pemerhati pelanggan yang boleh menerima pemberitahuan perubahan harta benda dan melaksanakan fungsi yang sepadan untuk mengemas kini paparan.

3. Laksanakan parser Compile, yang boleh mengimbas dan menghuraikan arahan yang berkaitan bagi setiap nod, dan memulakan data templat dan memulakan pelanggan yang sepadan mengikut

Nota: Proxy ialah ciri baharu JavaScript 2015. Proksi Proxy adalah untuk keseluruhan objek, bukan atribut tertentu objek , jadi tidak seperti Object.defineProperty yang mesti melintasi setiap atribut objek, Proxy hanya perlu melakukan satu lapisan proksi Pantau semua perubahan atribut di bawah struktur tahap yang sama Sudah tentu, untuk struktur dalam, rekursi masih perlu dilakukan. Selain itu, Proxy menyokong perubahan pada tatasusunan proksi. Proxy ialah kaedah yang digunakan oleh vue3.0

2. Sistem komponen

Pemahaman:

. 1 ) Keupayaan untuk mengabstrakkan halaman kepada beberapa modul yang agak bebas;

2) Melaksanakan penggunaan semula kod, meningkatkan kecekapan pembangunan dan kualiti kod, dan memudahkan penyelenggaraan kod

Pilihan teras untuk komponen

1 Templat: Templat mengisytiharkan hubungan pemetaan antara data dan DOM yang akhirnya dipaparkan kepada pengguna.

2 Data awal (data): Keadaan data awal komponen. Untuk komponen boleh guna semula, ini biasanya keadaan persendirian.

3 Parameter luaran (props) yang diterima: Data dipindahkan dan dikongsi antara komponen melalui parameter.

4 Kaedah: Perubahan pada data biasanya dilakukan dalam kaedah komponen.

5 cangkuk kitar hayat: Komponen akan mencetuskan berbilang fungsi cangkuk kitaran hayat Versi 2.0 terbaharu telah banyak menukar nama fungsi kitaran hayat.

6 Sumber peribadi (aset): Dalam Vue.js, arahan, penapis, komponen, dll. yang ditentukan pengguna secara kolektif dipanggil sumber. Komponen boleh mengisytiharkan sumber persendiriannya sendiri. Sumber persendirian hanya boleh dipanggil oleh komponen dan subkomponennya.

Cadangan berkaitan: "tutorial vue.js"

Atas ialah kandungan terperinci Apakah dua teras vuejs. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!