Pengenalan kepada rangka kerja JavaScript klasik dan mudah digunakan Vue.js

Artikel ini bertujuan untuk memperkenalkan rangka kerja JavaScript Vue.js yang berguna, supaya pembaca dapat memahaminya secara awal.

Vue (sebutan /vjuː/, serupa dengan paparan) ialah rangka kerja progresif untuk membina antara muka pengguna. Tidak seperti rangka kerja besar yang lain, Vue direka bentuk untuk digunakan lapisan demi lapisan dari bawah ke atas. Pustaka teras Vue hanya memfokuskan pada lapisan paparan, yang bukan sahaja mudah untuk dimulakan, tetapi juga mudah untuk disepadukan dengan perpustakaan pihak ketiga atau projek sedia ada. Sebaliknya, apabila digabungkan dengan rangkaian alat moden dan pelbagai perpustakaan sokongan, Vue mampu sepenuhnya menyediakan pemacu untuk aplikasi satu halaman yang kompleks.

Ciri Vue - Sifat Dikira

Menulis ungkapan dalam templat Vue sangat mudah, tetapi jika anda meletakkan logik yang kompleks di dalamnya, templat akan menjadi besar dan sukar untuk dikekalkan Untuk logik yang kompleks, Vue menyediakan sifat terkira untuk menyelesaikannya.

<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
})

Ini ialah contoh asas bagi sifat yang dikira, yang akan mengeluarkan:

Original message: "Hello"
Computed reversed message: "olleH"

Harta terbalik yang dikira diisytiharkan di sini dan fungsi yang kami sediakan dalam pengiraan akan digunakan sebagai nilai sifat vm.reversedMessage. Dan apabila vm.message berubah, vm.reversedMessage juga akan berubah dengan sewajarnya, dan jika terdapat sifat lain yang berkaitan dengannya, ia juga akan berubah dengan sewajarnya.

Sebenarnya, ini sangat serupa dengan kaedah Kita boleh menggunakan kaedah untuk mencapai kesan yang sama, serupa dengan ini

<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage（） }}"</p>
</div>var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
})

Anda boleh mendapatkan hasil yang sama seperti ini, tetapi perbezaan dari harta yang dikira ialah selagi mesej tidak berubah, harta yang dikira tidak akan melaksanakan fungsi, tetapi secara langsung mengembalikan hasil sebelumnya sementara kaedah memerlukan untuk melaksanakan fungsi berulang kali. Gunakan kaedah apabila anda tidak memerlukan caching.

Mari jawab soalan dahulu: Apakah itu Vuex?

Vuex ialah corak pengurusan keadaan yang dibangunkan khusus untuk aplikasi Vue.js. Ia menggunakan storan terpusat untuk mengurus status semua komponen aplikasi dan menggunakan peraturan yang sepadan untuk memastikan status berubah dengan cara yang boleh diramal. Vuex juga disepadukan ke dalam sambungan devtools alat penyahpepijatan rasmi Vue, yang menyediakan fungsi penyahpepijatan lanjutan seperti penyahpepijatan perjalanan masa konfigurasi sifar, import dan eksport syot kilat negeri, dsb.

Ekstrak keadaan bahagian komponen dan uruskannya dalam mod tunggal global. Dalam mod ini, pepohon komponen kami membentuk "pandangan" yang besar Tidak kira di mana ia berada dalam pepohon, mana-mana komponen boleh memperoleh status atau gelagat pencetus

Selain itu, dengan mentakrifkan pelbagai konsep dalam pengurusan keadaan pengasingan dan menguatkuasakan peraturan tertentu, kod kami akan menjadi lebih tersusun dan lebih mudah untuk diselenggara.

Idea ini meminjam daripada Flux, Redux, dan The Elm Architecture. Tidak seperti corak lain, Vuex ialah perpustakaan pengurusan negeri yang direka khusus untuk Vue.js untuk memanfaatkan mekanisme tindak balas data terperinci Vue.js untuk kemas kini keadaan yang cekap.

Walaupun Vuex boleh membantu kami mengurus keadaan kongsi, ia juga disertakan dengan lebih banyak konsep dan rangka kerja. Ini memerlukan penimbangan faedah jangka pendek dan jangka panjang.

Jika anda tidak bercadang untuk membangunkan aplikasi satu halaman yang besar, menggunakan Vuex mungkin menyusahkan dan berlebihan. Memang benar - jika aplikasi anda cukup mudah, lebih baik jangan gunakan Vuex. Bas acara global yang ringkas sudah memadai. Walau bagaimanapun, jika anda perlu membina aplikasi satu halaman sederhana hingga besar, anda mungkin akan mempertimbangkan cara mengurus keadaan di luar komponen dengan lebih baik, dan Vuex akan menjadi pilihan semula jadi.

Mari kita ambil React sebagai contoh untuk perbandingan Pertama sekali, kedua-duanya mempunyai banyak persamaan:

Gunakan DOM Maya
Menyediakan komponen paparan responsif (Reaktif) dan berkomponen (Boleh Disusun).
Kekalkan tumpuan pada perpustakaan teras dan biarkan fungsi lain seperti penghalaan dan pengurusan keadaan global kepada perpustakaan berkaitan.

Dalam aplikasi React, apabila keadaan komponen berubah, ia akan memaparkan semula keseluruhan sub pokok komponen dengan komponen sebagai akar.

Dalam aplikasi Vue, kebergantungan komponen dijejaki secara automatik semasa proses pemaparan, jadi sistem boleh mengetahui dengan tepat komponen mana yang benar-benar perlu dipaparkan semula. Anda boleh memahami bahawa setiap komponen telah memperoleh shouldComponentUpdate secara automatik, dan tiada sekatan pada masalah subpokok yang dinyatakan di atas.

Ciri Vue ini menghapuskan keperluan untuk pembangun mempertimbangkan pengoptimuman sedemikian dan membolehkan mereka memberi tumpuan yang lebih baik pada aplikasi itu sendiri.

Dalam React, semuanya adalah JavaScript. Bukan sahaja HTML boleh dinyatakan menggunakan JSX, tetapi trend semasa semakin menggabungkan CSS ke dalam JavaScript untuk diproses. Pendekatan jenis ini mempunyai kelebihannya, tetapi terdapat juga pertukaran yang tidak setiap pembangun selesa. Dalam React, semua fungsi pemaparan komponen bergantung pada JSX. JSX ialah alat untuk menulis JavaScript menggunakan sintaks XML.

Keseluruhan idea Vue adalah untuk menerima teknologi web klasik dan mengembangkannya. Malah, Vue juga menyediakan fungsi rendering dan juga menyokong JSX. Walau bagaimanapun, pengesyoran lalai kami ialah templat. Mana-mana HTML yang sah ialah templat Vue yang sah. Bagi kebanyakan pembangun yang biasa dengan HTML, templat adalah lebih semula jadi untuk dibaca dan ditulis daripada JSX. Sudah tentu terdapat unsur keutamaan subjektif di sini, tetapi jika perbezaan ini akan membawa kepada peningkatan kecekapan pembangunan, maka ia mempunyai nilai objektif.

Kedua-dua Vue dan React menyediakan penghalaan yang berkuasa untuk mengendalikan aplikasi yang besar. Komuniti React sangat inovatif dalam pengurusan negeri (seperti Flux, Redux), dan corak pengurusan negeri ini dan juga Redux sendiri boleh disepadukan dengan mudah ke dalam aplikasi Vue. Malah, Vue telah mengambil model ini (Vuex) selangkah lebih jauh dan menyepadukan penyelesaian pengurusan keadaan Vue Vuex dengan lebih mendalam, saya percaya ia boleh membawa anda pengalaman pembangunan yang lebih baik.

Satu lagi perbezaan penting antara keduanya ialah perpustakaan penghalaan Vue dan perpustakaan pengurusan negeri secara rasmi diselenggara dan disokong serta dikemas kini secara serentak dengan perpustakaan teras. React memilih untuk menyerahkan isu ini kepada komuniti, sekali gus mewujudkan ekosistem yang lebih terpencar. Tetapi secara relatifnya, ekosistem React lebih makmur daripada Vue.

Terdapat perbezaan lain antara React dan Vue, yang tidak akan saya jelaskan di sini, yang mana satu untuk dipilih mungkin bergantung pada pengguna. Pengguna mempunyai pemahaman yang lebih baik tentang Vue dan cara ia berbeza daripada pemalam lain.

Atas ialah kandungan terperinci Pengenalan kepada rangka kerja JavaScript klasik dan mudah digunakan Vue.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!