Apakah kelebihan dan kekurangan vue? Mengapa menggunakannya?

Kebaikan dan keburukan ialah: mudah, pantas, berkuasa dan mesra modul; tetapi ia tidak menyokong IE8 dan tidak mesra enjin carian, yang akan menjejaskan SEO. Sebab untuk digunakan: Vue ialah alat yang boleh mengurangkan kos pembangunan dan meningkatkan kecekapan pembangunan Ia boleh membantu pembangun membebaskan diri mereka daripada operasi DOM yang membosankan selepas menetapkan pandangan yang betul dan peraturan data semasa pembangunan, anda hanya perlu memfokuskan pada data , kandungan paparan akan berubah dengan sewajarnya, dan tidak perlu memanipulasi elemen DOM secara manual untuk mengubah suainya. Dan komponenisasi Vue sangat membantu dalam meningkatkan penggunaan semula kod dan merungkai projek besar.

Persekitaran pengendalian tutorial ini: sistem windows7, versi vue3, komputer DELL G3.

Apakah itu Vue?

Vue (sebutan /vjuː/, serupa dengan paparan) ialah rangka kerja JavaScript untuk membina antara muka pengguna. Ia dibina pada HTML, CSS dan JavaScript standard, dan menyediakan model pengaturcaraan berasaskan komponen deklaratif untuk membantu anda membangunkan antara muka pengguna dengan cekap. Sama ada antara muka yang mudah atau kompleks, Vue boleh melakukan semuanya.

Berikut ialah contoh asas:

import { createApp } from 'vue'

createApp({
  data() {
    return {
      count: 0
    }
  }
}).mount('#app')

<div id="app">
  <button @click="count++">
    Count is: {{ count }}
  </button>
</div>

Paparan hasil

Contoh di atas menunjukkan Dua fungsi teras Vue :

• Pemaparan deklaratif: Vue telah mengembangkan set sintaks templat berdasarkan HTML standard, membolehkan kami mengisytiharkan HTML keluaran akhir dan Perhubungan antara keadaan JavaScript secara deklaratif.

• Responsif: Vue secara automatik menjejaki keadaan JavaScript dan mengemas kini DOM secara responsif apabila ia berubah.

Kebaikan dan keburukan Vue.js

Kelebihan:

1. Mudah: Dokumentasi rasmi sangat jelas dan lebih mudah dipelajari daripada Angular.

2. Cepat: Kemas kini DOM dalam pemprosesan kelompok tak segerak.

3. Komposisi: Karang aplikasi anda dengan komponen boleh diguna semula yang dipisahkan.

4. Padat: ~18kb min+gzip, dan tiada kebergantungan.

5 Berkuasa: Ungkapan & sifat dikira tanpa mengisytiharkan kebergantungan.

6. Mesra modul: Ia boleh dipasang melalui NPM, Bower atau Duo Ia tidak memaksa semua kod anda untuk mengikut pelbagai peraturan Angular, dan senario penggunaan adalah lebih fleksibel.

Kelemahan:

• Tidak menyokong IE8.

  Vue.js tidak menyokong IE8 dan ke bawah kerana Vue.js menggunakan ciri ECMAScript 5 yang tidak boleh dicontohi oleh IE8. Vue.js menyokong semua penyemak imbas serasi ECMAScript 5.

• Vue ialah halaman satu halaman, yang tidak mesra enjin carian dan menjejaskan SEO Oleh itu, ia tidak sesuai untuk laman web rasmi syarikat. Sebagai contoh, laluan dua laluan Vue (halaman) adalah seperti berikut: index.html#aaa dan index.html#bbb, tetapi untuk enjin carian, kedua-duanya adalah halaman yang sama, iaitu index.html. Dengan cara ini, enjin carian tidak akan dapat memasukkan halaman anda.

Mengapa menggunakan Vue.js

Menggunakan mana-mana rangka kerja dan perpustakaan baharu sebenarnya untuk menyelesaikan masalah pembangunan semasa kami. masalah yang dihadapi boleh meningkatkan kecekapan pembangunannya. Kos setiap orang adalah masa, dan alatan yang baik boleh membantu kami menjimatkan masa Dari perspektif projek, ia juga membantu kami menjimatkan kos. Vue.js ialah alat yang boleh mengurangkan kos pembangunan dan meningkatkan kecekapan pembangunan. Ia boleh membantu kami membebaskan diri daripada operasi DOM yang membosankan. Semasa pembangunan, selepas kami menetapkan peraturan untuk paparan dan data yang betul, kami hanya perlu memberi perhatian kepada perubahan dalam data, dan kandungan pada paparan akan berubah dengan sewajarnya, tanpa perlu kami memanipulasi elemen DOM secara manual untuk mengubah suainya. .

Selain itu, model pembangunan bahagian hadapan secara beransur-ansur mula beralih ke arah komponenisasi, dan konsep Komponen Web secara beransur-ansur menjadi standard, dengan serpihan HTML bebasnya sendiri, fail JS dan gaya CSS, supaya ia boleh digunakan tanpa Risau tentang kesan pada kod perniagaan anda sendiri. Vue.js juga telah melaksanakan pelaksanaan konsep ini sendiri, yang sangat membantu untuk meningkatkan penggunaan semula kod dan merungkai projek besar.

Beberapa faedah vue:

1 Kawalan terikat secara automatik kepada data Apabila menyerahkan borang ke latar belakang, anda boleh terus menggunakan nilai data dalam data dan bukannya Anda perlu menggunakan kaedah $("#id") untuk mendapatkan nilai kawalan Adalah lebih mudah untuk menetapkan nilai kepada kawalan Anda hanya perlu menukar nilai data, dan kawalan akan menukar nilai secara automatik. Tukar operasi antara muka yang kompleks kepada operasi data.

Sebagai contoh, sekeping kod berikut boleh merealisasikan pengurusan dinamik senarai dalam kawalan pilih:

kod html:

<el-select v-model="mType" style="flex: 1;">
　　<el-option v-for="(item,index) in enums" :label="item.label" :value="item.value" :key="index"></el-option>
</el-select>

kod js:

data(){
    return{
　　　　mType:'',
　　　　enums:[{value:0,label:'未婚'},{value:1,label:'已婚'}]
　　}
}

Apabila anda perlu mengubah suai kandungan senarai pilih, anda tidak perlu lagi mengendalikan dom, anda hanya perlu menukar nilai enum. Apabila nilai yang dipilih oleh kawalan berubah, ia akan terikat secara automatik pada medan mType data.

2. Pemindahan nilai halaman dan pengurusan status

Terdapat banyak kaedah untuk dipilih dalam pemindahan nilai halaman Vue, seperti menggunakan atribut subkomponen untuk memindahkan nilai, seperti menggunakan parameter url halaman untuk memindahkan nilai, atau menggunakan kaedah pengurusan keadaan global vuex untuk memindahkan nilai pada muka surat, dsb. Dalam pembangunan asli, apabila halaman mempunyai berbilang parameter, pemindahan nilai halaman dan permulaan adalah lebih rumit. Vue, sebaliknya, menyimpan parameter secara langsung dalam objek, dan hanya menyimpan objek secara langsung untuk sifat subkomponen atau vuex.

3. Pembangunan modular, kemas kini modular

Seperti yang dinyatakan dalam perkara kedua, ia sebenarnya boleh dilanjutkan kepada pembangunan modular. Sebagai contoh, halaman senarai mempunyai fungsi penambahan dan pengubahsuaian Pada masa ini, kami boleh mengubah suai data komponen utama dengan merujuk subkomponen apabila kandungan subkomponen dikemas kini Contohnya, selepas mengubah suai bahagian daripada data, kami perlu mengubah suai komponen utama pada masa yang sama, tetapi kami tidak mahu menukar nombor halaman dan syarat carian halaman senarai asal. Jika anda menggunakan pembangunan asli untuk melaksanakan ini, anda perlu menulis banyak logik perniagaan untuk menyimpan parameter seperti keadaan carian dan nombor halaman halaman sebelumnya, tetapi jika anda membangunkan dengan Vue, ia akan menjadi sangat mudah.

4. Kebolehbacaan kod

Vue sememangnya mampu membangunkan komponen, jadi fungsi yang berbeza pada asasnya ditulis dalam modul yang berbeza, jadi kebolehbacaan kod adalah sangat tinggi. Apabila orang baru mengambil alih projek lama, dia pada asasnya boleh mencari kod untuk diubah suai dan membuat pengubahsuaian dalam satu atau dua hari.

5. Berdasarkan nodej yang berkuasa, tambah pustaka komponen baharu, yang boleh dipasang dengan perintah npm asas Contohnya, apabila saya perlu menggunakan komponen axios, saya boleh memasangnya terus dengan pemasangan npm axios, dan kemudian saya boleh menggunakan komponen axios . Pelajar yang biasa dengan maven boleh memahami alat npm dengan mudah.

6. Peruntukan utama, sub-perjalanan, halaman utama dan pendekatan subkomponen membolehkan kami meninggalkan iframe sepenuhnya. Pelajar yang telah menulis di bahagian hadapan semua tahu bahawa disebabkan oleh bar skrol iframe dan interaktiviti antara subhalaman dan halaman lain, pengalaman pengguna masih jauh kurang mesra daripada seni bina satu halaman. Dan menggunakan vue adalah sangat mudah dan mudah untuk melaksanakan susun atur tetap seperti menu sistem dan navigasi.

7. Modularisasi CSS: Setiap komponen boleh menggunakan nama gaya yang sama, tetapi mempunyai atribut gaya yang berbeza. Sebagai contoh, butang komponen A dan komponen B kedua-duanya terikat kepada class="btn", tetapi dalam kedua-dua komponen, kita boleh melaksanakan dua atribut gaya btn yang berbeza tanpa menjejaskan satu sama lain.

Pengesyoran berkaitan: tutorial video vue.js

Atas ialah kandungan terperinci Apakah kelebihan dan kekurangan vue? Mengapa menggunakannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!