Pada tahun 2019, popularitas kerangka Vue telah tumbuh dengan luar biasa. Jumlah unduhan Vue mingguan meningkat dua kali lipat: tahun lalu jumlahnya 600 ribu, dan sekarang 1,2 juta. Versi ketiga Vue yang telah lama ditunggu-tunggu, iterasi kerangka kerja berikutnya, akan dirilis pada kuartal pertama tahun 2020.
Dalam Vue 3.0. banyak fitur baru yang direncanakan. Fitur-fitur baru ini ditujukan untuk meningkatkan efisiensi programmer, meningkatkan sintaksis, dan mengoptimalkan kinerja sistem. Saya, sebagai orang yang mendukung Vue, berusaha untuk siap menggunakan inovasi segera setelah mereka keluar.
Di sini saya mengumpulkan beberapa tips yang berguna bagi mereka yang ingin mempersiapkan untuk kedatangan Vue 3.0. Saya harap mereka yang mengikuti tips ini akan dapat terbiasa dengan kondisi baru dengan sangat cepat.
1. Lihat fitur Vue 3.0 terbaru.
Tentu saja, seseorang tidak dapat mempersiapkan kedatangan sesuatu yang sama sekali tidak dikenal. Itulah mengapa penting untuk membiasakan diri dengan
perubahan di Vue 3.0. Inilah yang saya sarankan untuk memberikan perhatian khusus pada:
- API Komposisi memungkinkan Anda mengatur kode komponen dengan lebih baik.
- Dukungan untuk TypeScript membantu, antara lain, menyederhanakan penulisan kode karena mekanisme penyelesaian input.
- Render yang dipercepat , dicapai dengan memperkenalkan banyak optimasi pada kerangka kerja yang meningkatkan kinerjanya.
- Meningkatkan sifat statis , menghilangkan kebutuhan untuk membuat ulang elemen statis.
- Bekerja dengan objek yang dapat diamati menggunakan objek proxy membantu meningkatkan kinerja dan memperluas kemampuan untuk bekerja dengan objek reaktif.
Selain itu, saya menyarankan Anda untuk menonton kinerja
ini oleh Evan Yu mengenai perangkat Vue 3.0. Presentasi ini memungkinkan Anda untuk lebih memahami ide-ide yang ada di balik kerangka kerja.
Secara umum, sangat penting untuk mengetahui dengan tepat apa yang akan muncul dalam versi baru kerangka kerja, apa yang akan berubah. Faktanya adalah bahwa ini dapat mempengaruhi bagaimana programmer merencanakan struktur proyek mereka saat ini. Terutama dalam kasus-kasus ketika datang ke proyek-proyek baru. Proyek-proyek Vue baru yang sedang dibuat sekarang dan akan dibuat dalam waktu dekat harus dilakukan dengan mempertimbangkan transfer mereka ke Vue 3.0. Berkat ini, transisi seperti itu tidak akan berubah menjadi mimpi buruk.
2. Mulai Belajar TypeScript
Salah satu perubahan paling banyak dibicarakan yang diharapkan di Vue 3.0. - Ini adalah dukungan TypeScript. Basis kode Vue sedang ditulis ulang dalam TypeScript. Ini akan memberi pengembang kesempatan untuk menggunakan petunjuk jenis dan alat penyelesaian kode dalam IDE mereka.
Penting untuk dicatat bahwa ini tidak berarti bahwa setiap orang harus beralih ke TypeScript. Proyek Vue masih dapat ditulis dalam JavaScript. Tetapi menggunakan TypeScript memberikan peningkatan kecepatan dan kualitas kode.
TypeScript (TS) adalah superset dari JavaScript. Ini adalah bahasa, kode yang ditulis di mana dikompilasi dalam JavaScript (JS). Perbedaan antara TS dan JS adalah bahwa TypeScript memungkinkan Anda menentukan jenis variabel. Kesalahan dalam kode yang terkait dengan jenis dapat dideteksi pada tahap kompilasi. Berikut adalah beberapa cuplikan kode dari
dokumentasi TypeScript. Salah satunya ditulis dalam TypeScript, yang lain dalam JavaScript.
Berikut adalah kode JS:
function greeter(person) { return "Hello, " + person; } let user = "Jane User"; document.body.textContent = greeter(user);
Dan di sini adalah kode TS:
function greeter(person: string) { return "Hello, " + person; } let user = "Jane User"; document.body.textContent = greeter(user);
Perhatikan bahwa dalam kode TS ada indikasi jenis entitas. Melewati fungsi TS
greeter bukan string, tetapi, misalnya, sebuah array, akan menghasilkan pesan kesalahan ketika mencoba untuk mengkompilasi kode TS.
Jika Anda ingin mempelajari TypeScript - ini
dia - beberapa sumber yang bagus. Faktanya, ada sejumlah besar sumber informasi tentang TS. Di antara mereka, Anda dapat menemukan apa yang Anda butuhkan.
3. Pelajari Fitur Pola Vue
Vue 3.0. termasuk banyak perbaikan terkait rendering. Ini termasuk meningkatkan elemen statis, dan meningkatkan kerja dengan merender pohon, dan bahkan kemampuan untuk menulis metode rendering Anda sendiri.
Untuk mendapatkan hasil maksimal dari apa yang diberikan Vue 3.0 kepada Anda, Anda harus menguasai templat Vue dengan sempurna. Mungkin, secara alami, sumber pengetahuan terbaik tentang templat adalah
dokumentasi Vue resmi.
Selain itu, pemahaman tentang bagaimana mekanisme meningkatkan elemen statis bekerja, dan bagaimana pohon rendering blok diatur, dapat membantu meningkatkan efisiensi pengembangan template Anda sendiri. Memunculkan elemen statis adalah mekanisme yang operasinya mengarah pada fakta bahwa elemen statis tidak dibuat ulang setiap kali halaman ditampilkan. Sebaliknya, elemen yang sama terus digunakan.
Pohon rendering, yang terdiri dari blok, membantu menyederhanakan pemantauan objek reaktif, mengurangi jumlah operasi yang dilakukan selama rendering.
Menggunakan blok untuk membentuk pohon rendering4. Mulailah dengan API Komposisi
Salah satu inovasi terpanas (dan paling kontroversial) dari Vue 3.0. Apakah API Komposisi. Vue 2 sekarang menggunakan Opsi API. Saat menggunakannya, kode didistribusikan oleh komponen (data, metode, properti yang dihitung, dan sebagainya).
Berkat API baru, semua kode akan dikelompokkan. Ini akan meningkatkan keterbacaannya dan menyederhanakan ekstraksi dan penggunaan kembali fungsionalitas.
Komposisi APIMekanisme baru bekerja dengan menyediakan akses langsung ke sistem reaktivitas inti Vue, yang memungkinkan pengembang untuk mengontrol apa yang sedang dipantau. Selain itu, metode
setup() diperkenalkan, yang dipanggil segera setelah
beforeCreate() dan segera sebelum
created() .
Yang paling penting adalah bahwa
API Komposisi tersedia sekarang, sehingga sudah dapat digunakan dalam proyek yang ada.
5. Perbarui Pengetahuan Siklus Vue
Di bagian sebelumnya, API Komposisi adalah cara baru untuk menambahkan fungsionalitas ke komponen. Fakta bahwa metode siklus hidup
setup() komponen dipanggil sebelum metode yang
created() menunjukkan bahwa
setup() tidak memiliki akses ke data komponen, metode, atau properti yang dihitung.
Sekarang tidak sepenuhnya jelas bagaimana fitur baru Vue 3.0 lainnya. akan terkait dengan siklus hidup komponen. Tetapi, terlepas dari ini, mereka yang ingin mulai menggunakan Vue 3.0. Produktif sesegera mungkin harus menyegarkan pengetahuan mereka tentang
metode siklus hidup Vue. Yaitu, perlu memperhatikan kapan properti tertentu tersedia, dalam urutan apa metode dipanggil, dan sebagainya.
Siklus Hidup VueRingkasan
Sebagai hasilnya, saya ingin mengatakan bahwa seseorang yang ingin cepat mempelajari teknologi baru layak untuk dipelajari. Perlu membayar waktu sebanyak mungkin. Tim pengembang Vue jelas telah menjelaskan kepada masyarakat apa kerangka kerja Vue 3.0 itu. dibuat sedemikian rupa untuk memudahkan transisi ke sana untuk mereka yang sudah menggunakan Vue. Oleh karena itu, akan salah untuk berpikir seperti ini: "Vue 3 keluar, saya akan menunggu rilis, dan kemudian saya akan mengetahuinya." "Memahami" lebih baik di muka. Saya berharap bahwa apa yang dibahas dalam artikel ini akan membantu semua orang untuk mempersiapkan pertemuan Vue 3.0 secara memadai.
Pembaca yang budiman! Apa yang Anda harapkan dari Vue 3.0.?
