Dari pustaka javascript hingga kerangka kerja, perjalanan Vue sangat mengesankan, terutama jika Anda mempertimbangkan bagaimana ia tetap mempertahankan sifatnya yang ringan. Ada beberapa fitur yang ditawarkan Vue3, termasuk Pinia, yang memungkinkan pengelolaan status yang lebih mudah, serta toolchain build yang berfungsi di Vite. Apakah Anda ingin memperbarui aplikasi Anda ke Vue3 atau hanya ingin bereksperimen dengan kerangka kerja, kami telah mengumpulkan semua yang perlu Anda ketahui tentang Vue3 di sini!
Apa itu Vue3?
Sebelum kita masuk ke perubahan yang akan Anda lihat di Vue3, mari kita lihat dulu apa itu Vue.js dan komponen intinya:
Vue
Vue.js adalah kerangka kerja JavaScript front-end open-source yang dapat digunakan untuk membuat antarmuka pengguna. Kerangka kerja ini menawarkan pendekatan pengkodean deklaratif dan berbasis komponen yang membantu pengembangan tampilan pengguna dengan cepat. Ini dapat digunakan untuk mengembangkan antarmuka dasar atau rumit dan dibangun di atas HTML, CSS, dan JavaScript standar industri. Alasan popularitas Vue.js dan basis pengguna Vue.js yang besar adalah sintaks yang ramah pemrogram, kemudahan penggunaan, dan dokumentasi yang terdefinisi dengan baik.
Seperti disebutkan di atas, Vue.js dibangun di atas dua karakteristik inti:
Render deklaratif memungkinkan pengguna untuk menentukan keluaran HTML secara deklaratif bergantung pada status JavaScript. Vue.js berkembang pada HTML normal dengan bantuan sintaks template.
Reaktivitas - Vue.js secara aktif memantau status JavaScript, dan ketika dimodifikasi, Vue.js dengan cepat menyegarkan DOM.
Vue3.0
Insinyur yang menggunakan Vue 2 untuk membuat kode sekarang perlu memperbarui ke Vue3. Ini karena ia memiliki kemampuan baru yang membuat perancangan komponen yang dapat dibaca dan konsisten menjadi lebih mudah dan metode yang lebih baik untuk mengatur aplikasi kita. Vue3 lebih ramah pengguna, lebih pendek, dan lebih mudah dirawat. Beberapa fitur penting dari Vue3 adalah Teleport, Fragmen, dan beberapa model v.
Versi terbaru juga menghilangkan filter dan memiliki variabel CSS yang digerakkan oleh status serta fitur ketegangan eksperimental. Ini juga memiliki modifikasi penamaan siklus hidup dan perubahan komponen file tunggal.
Apakah Vue3 telah dirilis?
Versi terbaru Vue yang tersedia - Vue3, awalnya diumumkan pada pertengahan 2018 dan secara resmi dirilis pada September 2020. Vue3.0 dinyatakan sebagai versi default resmi dari framework javascript progresif pada 7 Februari 2022.
Apa yang baru di Vue3?
Perubahan paling menarik untuk dinantikan di Vue3 adalah:
Sediakan/suntikkan
Vue 2 memungkinkan pengguna untuk melewatkan data seperti string, array, objek, dan lainnya melalui alat peraga dalam kode. Data tersebut dapat dengan mudah diteruskan dari elemen induk ke elemen turunannya. Namun, menggunakan alat peraga membuatnya lebih sulit untuk mengirim data dari elemen induk ke elemen anak yang sangat bersarang. Akibatnya, pengembang harus menggunakan Vuex Store dan Event Hub. Vue 2.2.0 juga menyertakan penyedia/injeksi, tetapi tidak disarankan untuk digunakan dalam kode program umum.
Namun, dengan menggunakan kombo penyedia/injeksi yang ditingkatkan di Vue3, kita dapat melewatkan data dengan lebih cepat dan rapi. Seperti namanya, kami menggunakan untuk menyediakan agar data dapat diakses dari elemen induk ke salah satu komponen turunannya, terlepas dari seberapa dalam elemen turunan tersebut. Di sini, kita dapat menggunakan menyediakan sebagai objek atau sebagai fungsi.
Teleportasi
Berdasarkan logika aplikasi yang ingin Anda buat, komponen Anda mungkin ditampilkan di tempat yang berbeda dari tempat Anda ingin menampilkannya. Misalnya, Anda mungkin ingin membuat popup yang dimaksudkan untuk muncul dan memenuhi seluruh layar. Untuk mengatasinya, kita bisa menggunakan atribut position dari komponen tersebut di CSS, namun dengan Vue3, developer juga bisa menggunakan Teleport.
Teleport memungkinkan pemrogram mengambil elemen dari wadah awalnya yang dibungkus dan memindahkannya ke komponen yang sudah ada di halaman tempat elemen tersebut digunakan. Misalnya, Anda dapat memindahkan elemen header dari #app div ke header. Ingat bahwa Anda hanya dapat menggunakan Teleport untuk memindahkan elemen ke komponen kode yang ada di luar Vue DOM.
Fragmen
Sulit untuk memiliki beberapa komponen root dalam template file di Vue 2. Pemrogram mulai menyertakan semua komponen dalam komponen induk sebagai solusi untuk hal yang sama. Terkadang, pemrogram mungkin perlu merender elemen tanpa wadah yang membungkusnya. Insinyur sekarang dapat memiliki banyak item di file template root mereka berkat Fragmen, yang merupakan fitur yang ditambahkan ke Vue3.
API Vue Global
Anda mungkin sering menemukan Vue.component atau Vue.use di file main.js dari aplikasi Vue. Mereka disebut sebagai Global APIs , dan ada banyak metode seperti itu di Vue 2. Di sini jika Anda memiliki banyak instance aplikasi, semuanya ditempatkan di atas Vue. Sulit untuk membatasi fungsionalitas tertentu pada satu instance aplikasi.
Vue3 memecahkan masalah ini dengan memperkenalkan API Global baru yang disebut createApp. Dengan metode ini, Anda bisa mendapatkan instance baru dari aplikasi Vue. Semua API terkait Vue 2.x akan ditransfer ke instance aplikasi terpisah. Ini memungkinkan setiap instance aplikasi Anda memiliki fungsi yang eksklusif untuknya tanpa mengganggu instance lain yang sudah digunakan.
API Acara
Selain menggunakan Vuex Store, penggunaan Event Bus adalah salah satu metode paling populer yang digunakan programmer untuk melewatkan data antar elemen yang tidak berbagi konteks induk-anak. Namun, kode seperti $on, $off , dan $once semuanya dihapus di Vue3. Tetapi $emit masih dapat diakses karena elemen anak harus memancarkan acara ke elemen induknya. Solusi untuk ini adalah dengan menggunakan provide/inject.
Toolchain build yang didukung oleh Vite
Dirancang oleh Evan You, pencipta Vue, Vite adalah rantai alat pendukung Vue SFC terbaik yang ringan dan cepat dibuat. Vite sekarang menjadi mesin di balik konfigurasi build Vue3 standar. Modul bundler @vue-cli/service , yang dibangun di atas webpack, akan membungkus seluruh aplikasi Vue Anda saat peluncuran, hot reload, dan kompilasi. Vite, di sisi lain, akan mengambil sintaks ES Import dari kode program Anda dan memungkinkan browser untuk menganalisis setiap impor sebelum mengirim permintaan HTTP.
Perubahan dilakukan terutama karena alasan kecepatan. Server segera dimulai karena menggunakan dukungan browser asli untuk komponen JavaScript dan jauh lebih cepat.
Sintaks API Komposisi
API Opsi digunakan untuk membuat status dan logika elemen. Composition API diluncurkan oleh Vue3 sebagai pengganti yang sama. Ini hanyalah kumpulan API yang memungkinkan kita membuat elemen Vue tanpa menentukan opsi dengan menggunakan metode yang diimpor.
Composition API berisi API berikut:
Reaktivitas API - Misalnya, ref() dan reaktif(). Itu dapat secara langsung membangun status reaktif, status terhitung, dan pengamat menggunakan ini.
Kait siklus hidup - Misalnya, onMounted() dan onUnmounted(). Kita dapat menghubungkan ke siklus hidup elemen menggunakan kait siklus hidup.
Injeksi ketergantungan - Misalnya, berikan () dan injeksi (). Memanfaatkan sistem injeksi ketergantungan Vue dengan API Reaktivitas dimungkinkan oleh injeksi ketergantungan.
Kelebihan menggunakan API komposisi
Keuntungan utama menggunakan Composition API dibandingkan dengan Options API adalah:
- Sebuah elemen tidak lagi diperlukan dengan Vue3 untuk menghasilkan keadaan reaktif.
- Saat menambahkan banyak atribut reaktif, pengaturan di elemen Vue.js bisa menjadi membengkak. Mungkin berguna untuk membuat variabel reaktif ini diabstraksikan dalam file javascript terpisah karena ini.
- Manfaat utama Composition API adalah memungkinkan penggunaan kembali logika yang jelas dan efektif dalam bentuk metode Composable. Ini mengatasi semua masalah dengan mixin, metode utama menggunakan kembali logika di API Opsi.
- Anda dapat mengetikkan kode di Composition API dengan inferensi tipe lengkap.
- Program yang Anda tulis di Composition API lebih efisien, dan nama variabel dapat dibuat lebih kecil. Ini mengurangi biaya overhead.
- Anda dapat membagikan kode program Anda lebih baik dengan Composition API.
pinia
Pinia adalah alat manajemen status ringan untuk Vue.js. Ini memungkinkan kita untuk berbagi status antara elemen dan halaman. Ini menciptakan kerangka kerja manajemen negara yang mudah digunakan dan diketik dengan menggunakan konsep reaktivitas baru di Vue3. Ini sekarang perpustakaan kontrol status standar baru Vue3.
Pinia awalnya berfungsi sebagai studi tentang potensi Vuex. Untuk waktu yang lama, Vuex adalah sistem manajemen status yang disarankan untuk Vue, tetapi dengan Vue3, Pinia adalah sistem yang direkomendasikan untuk mengelola status dalam dokumentasi resmi. Saat ini, Vuex sedang dalam mode pemeliharaan. Meskipun terus berfungsi, tidak ada fitur baru yang akan ditambahkan. Penggunaan Pinia disarankan untuk aplikasi baru.
Mengapa Pinia?
Pinia sangat ringan, hanya mencapai 1KB. Selain itu, ini terintegrasi dengan alat pengembang Vue.js untuk meningkatkan pengalaman pengkodean Anda di Vue 2 dan Vue3. Karena Pinia menyimpulkan semua tipe data Anda, Pinia dapat menawarkan penyelesaian otomatis yang lengkap dan tepat dalam javascript juga. Pinia juga memiliki desain modular, mudah digunakan, dan dapat diperluas. Secara keseluruhan, Pinia tampak ringan, tidak rumit, dan lugas. Ini sangat mirip berurusan dengan elemen dan berisi semua alat yang diperlukan untuk pemrograman dinamis di Vue3.
Apakah Vue 2 akan ditinggalkan?
Pembaruan kecil terakhir untuk Vue 2 adalah Vue 2.7, yang dirilis pada Juli 2022. Vue 2 saat ini dalam mode pemeliharaan. Meskipun tidak ada fitur tambahan yang akan dikirimkan, itu masih akan mendapatkan perbaikan bug penting dan patch keamanan selama 18 bulan. Pada akhir 2023, Vue 2 akan dihentikan.
Migrasi dari Vue 2
Berdasarkan perangkat lunak Anda, beralih ke Vue3 mungkin tidak bermanfaat jika Anda mengerjakan proyek yang sangat besar menggunakan Vue 2. Gunakan Vue3 jika masalah efisiensi tetap ada meskipun Anda telah melakukan upaya terbaik dalam pengoptimalan.
Apakah Anda ingin memigrasikan aplikasi Anda ke Vue3 atau tidak tergantung pada ukuran dan kerumitannya. Sebagian besar sintaks dan teknik di Vue 2 sama dengan di Vue3. Namun, jika Anda ingin menggunakan beberapa perubahan yang disebutkan di atas, maka migrasi adalah ide yang lebih baik.
Vue.js dalam proyek AppMaster
Platform AppMaster menggunakan kerangka kerja VueJS, atau lebih tepatnya versi ketiga kerangka kerja, untuk membuat aplikasi front-end bagi pengguna kami. Vue 3 digunakan untuk membuat portal admin, panel, dan klien, dan seluruh antarmuka studio AppMaster sebenarnya dibuat menggunakan kerangka kerja VueJS juga.
Kami menggunakan pendekatan khusus yang disebut micro-frontends atau front-end microservices untuk dapat mengembangkan produk kami dengan cepat dan efisien; misalnya, setiap editor model data dan editor proses bisnis adalah aplikasi front-end yang sepenuhnya terpisah di platform kami. Ini memungkinkan kami untuk berkembang dengan sangat cepat dan independen dari sudut pandang tim pengembangan, yang meningkatkan kecepatan keseluruhan produk kami. Semua keuntungan ini dapat diperoleh pelanggan kami dengan menggunakan aplikasi kami.
Di masa depan, selain mode aplikasi satu halaman SPA, kami akan menambahkan mode SSR (perenderan sisi server), yang akan memungkinkan pelanggan kami untuk membuat tidak hanya panel admin dan portal kustom tetapi juga situs web berfitur lengkap dengan sangat optimasi SEO yang tinggi.
Tentang tanpa kode
Salah satu elemen kunci yang mempengaruhi demokratisasi pengkodean adalah pendekatan pengembangan tanpa kode . Saat ini, semakin banyak orang dapat mengakses pemrograman secara umum tanpa adanya pengkodean. Itu membuat desain web, pengembangan aplikasi seluler , dan pengembangan web responsif menjadi lebih sederhana.
AppMaster adalah salah satu aplikasi yang dapat digunakan untuk membuat kode sumber secara otomatis. Anda dapat melihat dan memeriksa kode kapan saja. Dengan AppMaster, Anda memiliki opsi untuk menyesuaikan informasi proyek menggunakan bahasa komputer. Kami juga mengizinkan orang mengekspor kode jika mereka mau. Ini adalah jaminan bahwa Anda memiliki kendali dan kepemilikan penuh atas aplikasi yang sedang Anda kerjakan dengan AppMaster.
Kesimpulan
Jika Anda ingin penjelasan lebih rinci tentang perbedaan Vue3 dari Vue 2, bersama dengan cuplikan kode, Anda dapat membaca dokumentasi resmi Vue.js. Kami telah menyebutkan sebagian besar perubahan besar yang harus Anda ketahui. Penting bagi Anda untuk tetap mengetahui pembaruan Vue3 jika Anda tertarik untuk membangun aplikasi dengan kerangka kerja ini.
