Apakah faedah menggunakan rangka kerja vue?

Faedah menggunakan vue: 1. Vue ialah pembangunan berasaskan komponen, yang mengurangkan penulisan kod dan menjadikan kod mudah difahami 2. Data boleh diikat dalam dua arah 3. Berbanding dengan penggunaan tradisional; hiperpautan untuk mencipta halaman Untuk menukar dan melompat, Vue menggunakan penghalaan dan tidak perlu menyegarkan halaman 4. Vue ialah aplikasi satu halaman Ia tidak perlu mendapatkan semua data dan DOM semasa memuatkan, yang meningkatkan kelajuan pemuatan dan mengoptimumkan pengalaman pengguna; 5. Komponen pihak ketiga Vue Perpustakaan ini kaya, mudah digunakan dan meningkatkan kecekapan pembangunan.

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

Apakah itu Vue.js

Vue ialah rangka kerja JavaScript 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 menyediakan pemacu untuk aplikasi satu halaman (SPA) yang kompleks.

Matlamat Vue.js adalah untuk membolehkan pengikatan data responsif dan komponen paparan terdiri melalui API yang paling mudah.

Vue.js sendiri bukanlah rangka kerja yang komprehensif - ia hanya memfokuskan pada lapisan paparan. Oleh itu ia sangat mudah untuk dipelajari dan sangat mudah untuk disepadukan dengan perpustakaan lain atau projek sedia ada. Sebaliknya, Vue.js juga boleh menguasakan aplikasi satu halaman yang kompleks apabila digunakan dengan alat yang berkaitan dan perpustakaan sokongan.

Kelebihan Vue.js

• Saiz kecil: hanya 33k selepas pemampatan

• Lagi Kecekapan pengendalian yang tinggi: Berdasarkan DOM maya, teknologi yang boleh melakukan pelbagai pengiraan melalui JavaScript terlebih dahulu untuk mengira dan mengoptimumkan operasi DOM terakhir Memandangkan operasi DOM ini ialah operasi prapemprosesan dan sebenarnya tidak mengendalikan DOM, Ia dipanggil DOM maya; [Belajar perkongsian video: tutorial video vue, video bahagian hadapan web]

• Pengikatan data dua hala: supaya pembangun tidak t perlu Kemudian mengendalikan objek DOM dan meletakkan lebih banyak tenaga ke dalam logik perniagaan; Rangka kerja dan komponen pasaran boleh digunakan di luar kotak untuk mencapai pembangunan yang pantas kepada pemula, mudah dimulakan, dan mempunyai banyak bahan pembelajaran Katakanlah, dalam pembangunan web tradisional, kami membina projek berdasarkan struktur HTML; dan kemudian tambah pelbagai fungsi kesan khas melalui jquery atau js, dan kita perlu memilih setiap elemen untuk arahan.

Kandungan ini masih boleh ditangani dalam projek mudah atau projek tidak berubah Setelah projek berubah atau projek itu besar, pengubahsuaian kod akan menjadi rumit dan menyusahkan.

• Tetapi sekarang dengan vue, masalah ini tidak lagi wujud. Contohnya, sesetengah aplikasi yang dibuat daripada satu halaman web biasanya melibatkan banyak interaksi data, dan menggunakan Vue akan mengurangkan beban kerja dengan banyak.

Apakah kelebihan ketara vue dalam pembangunan web dan penghasilan laman web?

1 Pengikatan data: Vue akan menetapkan data elemen mengikut elemen yang sepadan, dan melakukan pengikatan data masa nyata melalui kotak input, mendapatkan data dan kaedah lain untuk laman web dan aplikasi.

2. Pembangunan berasaskan komponen: Melalui enkapsulasi modul vue, ia boleh memisahkan pelbagai modul yang direka dalam pembangunan web kepada komponen yang berasingan, dan kemudian memanggil komponen templat yang sepadan melalui pengikatan data , dan dengan menghantar parameter di pada masa yang sama, pembangunan keseluruhan projek dapat disiapkan. Apakah faedah menggunakan vue?

Vue ialah pembangunan komponen, yang mengurangkan penulisan kod dan menjadikan kod mudah difahami. Kelebihan yang paling ketara ialah ia boleh mengikat data dalam dua arah.

• Berbanding dengan penggunaan hiperpautan tradisional untuk menukar dan melompat halaman, Vue menggunakan penghalaan dan tidak perlu memuat semula halaman.

• Vue ialah aplikasi satu halaman ia tidak perlu mendapatkan semua data dan DOM semasa memuatkan, yang meningkatkan kelajuan pemuatan dan mengoptimumkan pengalaman pengguna.

• Vue mempunyai perpustakaan komponen pihak ketiga yang kaya, yang mudah digunakan dan meningkatkan kecekapan pembangunan.

• 1. Peningkatan prestasi responsif

• 1) pengoptimuman kaedah diff

Algoritma diff ialah produk DOM maya yang tidak dapat dielakkan teknologi , ia membandingkan DOM lama dan baharu, dan kemudian mengemas kini DOM yang diubah pada DOM sebenar. Menggunakan vue, apabila membuat DOM maya, tanda statik akan ditambah berdasarkan kandungan dalam DOM Apabila data berubah, nod bertanda statik akan dibandingkan, supaya DOM yang diubah boleh ditemui dengan cepat.

2) Cache pendengar acara Secara lalai onClick akan dianggap sebagai pengikatan dinamik, jadi perubahannya akan dijejaki setiap kali, tetapi kerana ia adalah fungsi yang sama, tidak perlu menjejaki ia Perubahan boleh terus dicache dan digunakan semula.

3) pemaparan ssr

Apabila terdapat sejumlah besar kandungan statik, kandungan akan ditolak ke dalam penimbal sebagai rentetan tulen Walaupun terdapat pengikatan dinamik, ia akan diselit masuk melalui interpolasi templat, yang akan menjadi lebih pantas daripada DOM maya. rendering.

2. Pengurangan saiz kod

Saiz pakej dikurangkan sebanyak 41%.

vue telah mengalih keluar beberapa API yang tidak biasa, seperti templat sebaris, penapis, dsb., dan menggunakan goncangan pokok.

Tree Shaking Tree shaking pengoptimuman bermakna apabila kami memperkenalkan modul, kami tidak memperkenalkan semua kod modul ini, tetapi hanya kod yang kami perlukan.

Dalam vue, penggoncangan pokok diperkenalkan, dan semua API diperkenalkan melalui modularisasi ES6 Ini membolehkan alat pembungkusan seperti webpack atau rollup mengubah suai API yang tidak digunakan secara automatik semasa pembungkusan untuk meminimumkan saiz berkas.

Paparan awal 55% lebih pantas dan pemaparan kemas kini 133% lebih pantas. Komponen diperkenalkan atas permintaan, yang menjadikan saiz bungkusan lebih kecil, jadi projek berjalan lebih cepat dan lancar!

3. Kompilasi dioptimumkan

Selepas vue menggunakan promosi statik, elemen yang tidak mengambil bahagian dalam kemas kini hanya akan dibuat sekali dan boleh digunakan semula secara langsung semasa pemaparan.

Tidak perlu mencipta nod akar yang unik dalam templat Fragmen Anda boleh terus meletakkan tag dan kandungan pada tahap yang sama. Ia bersamaan dengan kurang satu nod untuk pemaparan bersarang.

4. Gabungan API

vue telah menambah gabungan API, yang lebih kondusif untuk penyelenggaraan dan enkapsulasi. Kod modul berfungsi akan dikumpulkan bersama untuk mencapai kohesi tinggi dan gandingan rendah. Tingkatkan kebolehbacaan dan kebolehselenggaraan kod, dan API berdasarkan komposisi fungsi lebih baik menggunakan semula kod logik.

5. Sokongan ts yang lebih baik

vue telah menambah fungsi defineComponent, membolehkan komponen menggunakan inferens jenis parameter dengan lebih baik di bawah ts. Contohnya: reaktif dan ref sangat mewakili.

6. Komponen yang lebih maju

• vue tidak memerlukan nod akar dan berbilang elemen atau label boleh wujud bersebelahan.

• Anda boleh menambah kandungan dalam teleport ke mana-mana nod, yang pastinya merupakan rahmat untuk komponen bersarang dalam.

• Membenarkan atur cara menunggu komponen tak segerak menghasilkan beberapa kandungan sandaran membolehkan kami mencipta pengalaman pengguna yang lancar.

7 Ringkasan ringkas:

vue kini merupakan salah satu rangka kerja bahagian hadapan yang paling popular di China telah meningkatkan prestasi dan berjalan kelajuan daripada yang lain.

Ringkasnya, vue ialah:

• Jadikan projek lebih pantas

• Kurangkan kod

• Lebih mudah diselenggara

• Mari kita membangun dengan lebih pantas dan kurang bekerja lebih masa

(Belajar perkongsian video: web Pembangunan bahagian hadapan, Video Pengaturcaraan Asas)

Atas ialah kandungan terperinci Apakah faedah menggunakan rangka kerja vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!