Vue 3 akan semakin cepat

Salah satu peristiwa paling mencolok di dunia Frontend tahun ini adalah penerbitan repositori Vue berikutnya - bagian dari fungsionalitas versi ketiga VueJS. Artikel ini memberikan gambaran umum tentang fitur pembunuh baru VueJS. Pada saat publikasi artikel, repositori berada dalam status Pra-Alpha . Rencana rilis dapat dilihat di Roadmap

Latar belakang

Pada bulan Februari 2018, Evan You, pencipta Vue.js, membagikan rencananya untuk versi 3 dari kerangka kerja populer:

• Pisahkan fungsionalitas ke dalam paket untuk mengisolasi cakupan
• TypeScript muncul di basis kode
• Vue 3 akan kompatibel dengan versi ke-2 (mis. Tidak akan merusak kode lama)
• Pengamat dalam versi 3.0 didasarkan pada Proxy, yang akan meningkatkan kecepatan rendering dan menghapus sejumlah batasan yang diberlakukan oleh Object.defineProperty
• Anda akan dapat melakukan debut menggunakan kait renderTriggered dan renderTriggered
• Berkat pengenalan pohon goyang (tidak termasuk arahan yang tidak terpakai dari bangunan), ukuran kerangka kerja akan kurang dari 10kb dalam bentuk terkompresi
• Optimasi Slot
• Performa di vue 3 akan meningkat 100%

Fitur seperti komponen bawaan dan help runtime directive (v-model) sekarang diimpor sesuai permintaan dan dapat diguncang pohon
Evan kamu

Compiler akan melacak keberadaan arahan dan memasukkannya dalam build pada tahap kompilasi.

Dalam proses mengerjakan Vue 3, Evan menolak untuk menulis ulang komponen ke kelas dan bukannya mengimplementasikan API fungsional.

Karena versi baru akan menggunakan proksi yang tidak didukung di IE, Evan berencana untuk membuat build terpisah untuk IE11. Secara total, 4 fase menjanjikan:

1. Alpha Phase - tahap finalisasi kompiler dan rendering ssr
2. Beta Phase - tahap finalisasi perpustakaan utama (Vue Router, Vuex, Vue CLI, Vue DevTools)
3. RC Phase - Prerelease Stage Termasuk Vue 2.0
4. IE11 build
5. Rilis terakhir

Evan telah merencanakan rilis final untuk 2019, tetapi proyek ini masih dalam tahap pra-alfa.

Vue 3 akan lebih cepat

Berkat sejumlah inovasi, Vue 3 akan menjadi 2 kali lebih cepat dari versi sebelumnya.

Pengamatan dan Reaktivitas Berbasis Proksi

Salah satu inovasi utama adalah perubahan dalam mekanisme pemantauan objek dari getter dan setter Object.defineProperty ke Proxy. Sekarang Vue dapat melacak penghapusan dan penambahan properti dari objek reaktif tanpa menggunakan Vue.set dan Vue.delete. Inovasi ini meningkatkan kecepatan rendering dan scripting dan mengurangi konsumsi memori sebanyak 2 kali! Anda dapat membandingkan kinerja Vue 2 dan Vue 3 dengan mengunduh repositori Ilya Klimov

Perbandingan kinerja Vue 2 (kiri) dan Vue 3 (tahap pra-alfa, kanan)


Berkat proksi, reaktivitas tidak akan hilang ketika mengubah manipulasi objek yang tidak dilacak di Vue 2. Sekarang Vue tidak akan secara traverse melintasi properti dari suatu objek untuk menghitung perubahan.

Apa yang dibuat dari janji:

• Keturunan dan orang tua digambar ulang secara independen
• Ukuran Vue 3 menurun dari 20kb menjadi 10kb dalam bentuk terkompresi
• TypeScript Ditambahkan

Optimalisasi lainnya:

• Vue 3 akan mengingat konten statis dan hanya menambal data dinamis
• Alat peraga statis naik ruang lingkup
• Untuk kemudahan pengembangan, kode Vue 3 dipecah menjadi paket modular.
• Paket runtime-core dibuat lintas platform
• Alih-alih kelas, Evan menambahkan fungsi pengaturan dan kait yang membuat kode bersih, terorganisir, dan dapat digunakan kembali *
• Mengiris Waktu *. Eksekusi kode JS terpotong-potong tanpa menghalangi interaksi pengguna dengan aplikasi

Tanda bintang menunjukkan API eksperimental .
Pembaruan: Kemudian, Evan memutuskan untuk mengabaikan waktu.

Terinspirasi oleh HOC, Reacta Evan mengimplementasikan fungsi pengaturan dengan logika yang dapat digunakan kembali dan kait kustom. Tidak seperti mixin, kait siklus hidup tidak saling menimpa.

Patch VDom yang ditingkatkan

Joystick Konten Statis



Konten statis dipindahkan di luar tambalan VDom saat menyusun templat. Vue terinspirasi oleh Svelte untuk melakukan ini:

 <div>Hello, {{name}}</div> 

Di sini, objek dan konteks yang diubah dilewatkan. Jika diubah berisi variabel reaktif, maka itu diperbarui dalam konteks.

 p(changed, ctx) { if(changed.name) { set_data(t1, ctx.name); } } 

Dalam implementasi sebelumnya, kompiler Vue melewati semua node, termasuk yang statis:

 function render(){ const children = []; for(let i = 0; i < 5; i++) { children.push(h('p', { class: 'text' }, i === 2 ? this.message : 'Lorem upsum')) } return h('div', { id: 'content' }, children) } 

Strategi kompilasi template baru

Dalam versi baru, templat dibagi menjadi beberapa blok:

• Template dibagi menjadi beberapa blok
• Struktur node di dalam setiap blok sepenuhnya statis.
• Untuk melacak nilai dinamis dalam sebuah blok, hanya 1 array datar yang diperlukan, di mana mereka ditempatkan

Dengan strategi baru, kinerja secara langsung tergantung pada jumlah konten dinamis daripada ukuran templat.

Vue 3 akan lebih baik disesuaikan dengan proyek-proyek besar

Proyek besar menghadapi masalah berikut saat menggunakan Vue:

1. Dukungan TypeScript tidak sempurna
2. Komponen yang besar dan sulit disokong
3. Kurangnya pola sederhana untuk menggunakan kembali kode

Awalnya, direncanakan untuk menambah kelas untuk mendukung TS. Tetapi tim Vue mengalami masalah:

• Mencampur alat peraga dan atribut lainnya dengan ini bermasalah
• Dekorator untuk kelas ES6 di TC39 tidak stabil

Tim Evan meminta bantuan dari para ahli TC39 dan menemukan bahwa implementasi serupa dapat bertentangan dengan plugin yang menggabungkan berbagai alat peraga dan atribut ke dalam konteks Vue.

Berpotensi, masalah ini bisa diselesaikan oleh dekorator, tetapi mereka masih dalam pengembangan.

API komposisi

Tim Vue terinspirasi oleh React hooks dan memutuskan untuk membuat API serupa. Ini opsional dan sedang dalam pengembangan dan diskusi, sehingga beberapa nama dapat berubah.
Konsep utama dari perubahan ini adalah mengatur kode komponen secara lebih logis, memecahnya menjadi blok semantik. Anda dapat membaca lebih lanjut tentang komposisi API dalam dokumentasi .

Contoh penggunaan Vue 3. Komponen dibagi menjadi fungsi logis, di dalamnya Anda dapat menggunakan kait reaktivitas dan siklus hidup.

Impor kait baru dari API komposisi:

 import { reactive, computed, onMounted } from '@vue/composition-api'; export default { setup() { const { state } = countAnimal("rabbit") const { getType, anotherState } = anotherCount() return { state, getType, anotherState } } } 

Fungsi countAnimal memiliki jumlah properti reaktif , hewan, dan metode kenaikan . Dengan penghitung aneh, nama binatang itu berubah. Penghitung dimulai saat komponen dipasang.

 function countAnimal(name) { const state = reactive({ count: 0, animal: computed(() => state.count % 2 ? name : 'bear') }) function increment() { setTimeout(() => { state.count++; increment() }, 1000) } onMounted(() => { increment() }) return { state } } 

Kami membuat fungsi lain anotherCount , yang juga berisi metode kenaikan dan status dengan penghitung dan nama hewan. Metode getType meneruskan nama hewan dari template.

 function anotherCount() { const anotherState = reactive({ count: 0, animal: 'fox' }) function getType(name) { return name == 'bear' ? 'slow' : 'fast' } function increment() { setTimeout(() => { anotherState.count+=10; increment() }, 1000) } onMounted(() => { increment() }) return { getType, anotherState } } 

Templat menampilkan 2 penghitung dan 2 nama hewan. Jenis lari bervariasi tergantung pada nama hewan.

 <template> <div> <div>Count {{state.animal}}: {{ state.count }}</div> <div>{{state.animal}} runs {{getType(state.animal)}}</div> <div>Another: Count {{anotherState.animal}}: {{ anotherState.count }}</div> </div> </template> 

Kait baru digunakan di dalam pengaturan tanpa merusak API lama. Perhatikan bahwa onMounted mengacu pada kait siklus hidup komponen tunggal.

Api ini memiliki beberapa keunggulan:

• Kait siklus hidup tidak saling menggosok
• Bersihkan sumber properti
• Tidak ada instance komponen tambahan yang dibuat

Kesimpulan

Perubahan paling penting dalam Vue 3. tercantum di atas. Sebagian besar perbaikan akan disembunyikan di bawah kap kode yang dihasilkan oleh kompiler.

Perbaikan besar:

• Kode yang dihasilkan optimal untuk kompiler JS
• Bundel yang dihasilkan lebih mudah
• Komponen orangtua / anak digambar ulang berkat algoritme perbaikan yang ditingkatkan

Vue telah memantapkan dirinya sebagai salah satu kerangka kerja tercepat dan paling optimal. Versi baru akan menjadi lebih cepat dan lebih mudah. Vue 3 sangat bagus untuk web berorientasi mobile dan kinerja saat ini. Komentar tentang perubahan di masa depan dapat ditinggalkan di RFC resmi (permintaan komentar).
PS Terima kasih telah memperbaiki kesalahan ketik.