Perkenalan

INFO

Baru dalam Vue.js? Kunjungi Panduan Esensial kami untuk memulai.

Panduan ini ditujukan untuk pengguna yang telah memiliki pengalaman Vue 2 sebelumnya serta ingin mempelajari tentang fitur baru dan perubahan di Vue 3. Berikut ini bukan sesuatu yang harus Anda baca dari atas hingga bawah sebelum mencoba Vue 3. Sementara terlihat banyak sekali perubahan, apa yang Anda ketahui dan cinta terhadap Vue tetaplah sama; tetapi kami ingin mengungkapkan secara seksama dan memberikan penjelasan secara mendetail dan contoh-contoh untuk setiap perubahan dokumen.

• Quickstart
• Build Migrasi
• Fitur baru yang penting
• Perubahan terkini
• Pustaka yang mendukung

Gambaran Umum

Mulai belajar Vue 3 di Vue Mastery (opens new window).

Quickstart

Jika Anda ingin mencoba Vue 3 dengan cepat di sebuah proyek baru:

• Melalui CDN: <script src="https://unpkg.com/vue@next"></script>

• In-browser playground di Codepen (opens new window)

• In-browser Sandbox di CodeSandbox (opens new window)

• Scaffold melalui Vite (opens new window):

  npm init vite hello-vue3 -- --template vue # OR yarn create vite hello-vue3 --template vue
  

• Scaffold melalui vue-cli (opens new window):

  npm install -g @vue/cli # OR yarn global add @vue/cli
  vue create hello-vue3
  # select vue 3 preset
  

Build Migrasi

Jika Anda sudah mempunyai proyek Vue 2 atau pustaka yang ingin Anda tingkatkan ke versi Vue 3, kami menyediakan sebuah build dari Vue 3 beserta Vue 2 APIs yang kompatibel. Kunjungi halaman Migrasi Build untuk detail lebih lanjut.

Fitur Baru yang Penting

Beberapa fitur baru yang akan membuat Anda tertarik di Vue 3 termasuk:

• Composition API
• Teleport
• Fragments
• Emits Component Option
• createRenderer API from @vue/runtime-core (opens new window) to create custom renderers
• SFC Composition API Syntax Sugar (<script setup>)
• SFC State-driven CSS Variables (v-bind in <style>)
• SFC <style scoped> can now include global rules or rules that target only slotted content (opens new window)
• Suspense experimental

Perubahan Terkini

Berikut ini adalah daftar perubahan terkini dari 2.x:

Global API

• Global Vue API diubah agar menggunakan sebuah instansi aplikasi
• Global dan APIs Internal telah direkontruksi ulang sebagai tree-shakable

Pengarahan Templat

• Penggunaan v-model dalam komponen telah dikerjakan ulang, menggantikan v-bind.sync
• Penggunaan key dalam simpul <template v-for> dan bukan-v-for telah diubah
• Pendahuluan v-if dan v-for ketika digunakan dalam elemen yang sama telah diubah
• v-bind="object" sekarang order-sensitive
• v-on:event.native modifier telah dihapus
• ref dalam v-for tidak lagi terdaftar sebagai array dari refs

Komponen

• Functional components hanya dapat dibuat menggunakan plain function
• Atribut functional dalam komponen single-file (SFC) <template> dan opsi functional komponen telah usang
• Komponen async sekarang memerlukan metode defineAsyncComponent agar dapat dibuat
• Komponen events harus dideklarasikan dengan opsi emits

Render Function

• Render function API diubah
• Properti $scopedSlots dihapus dan semua slots terekpos melalui $slots sebagai functions
• $listeners telah dihapus / digabung dengan $attrs
• $attrs sekarang termasuk atribut class dan style

Elemen Kustom

• Mengecek elemen kustom sekarang dilakukan saat kompilasi templat
• Penggunaan spesial is prop dibatasi hanya dapat dipesan oleh <component> tag

Beberapa Perubahan Lain

• Opsi siklus hidup destroyed diubah nama menjadi unmounted
• Opsi siklus hidup beforeDestroy diubah nama menjadi beforeUnmount
• Props default factory function tidak lagi mengakses ke konteks this
• API pengarahan kustom diubah untuk sejajar dengan siklus hidup komponen dan binding.expression dihapus
• Opsi data harus selalu dideklarasikan sebagai function
• Opsi data dari mixins sekarang digabung secara dangkal
• Strategi pemaksaan atribut diubah
• Beberapa kelas transition berubah nama
• <TransitionGroup> sekarang renders elemen tanpa wrapper secara default
• Ketika melihat sebuah array, callback akan hanya terpicu ketika array digantikan. Jika Anda ingin memicu ketika mutasi, opsi deep harus dispesifikkan.
• <template> tags tanpa pengarahan spesial (v-if/else-if/else, v-for, atau v-slot) sekarang diperlakukan sebagai elemen polos dan akan mengakibatkan pada sebuah elemen native <template> daripada me-render konten didalamnya.
• Aplikasi yang terpasang tidak mengubah elemen yang dipasangkan
• Siklus hidup event dengan awalan hook: berubah menjadi vnode-

APIs yang Dihapus

• dukungan keyCode sebagai v-on modifiers
• metode-metode instansi $on, $off dan $once
• Filters
• Atribut templat Inline
• Properti instansi $children
• Opsi propsData
• Metode instansi $destroy. Pengguna seharusnya tidak lagi mengatur secara manual siklus hidup dari setiap komponen Vue.
• Fungsi global set dan delete, dan metode instansi $set dan $delete. Tidak lagi diperlukan untuk pendeteksian perubahan berdasarkan proxy-based.

Pustaka yang Mendukung

Semua pustaka dan alat resmi dari kami sekarang mendukung Vue 3, tetapi sebagian masih dalam tahap beta atau dalam status kandidat release. Anda akan menemukan detail-detail dari setiap pustaka secara individu di bawah. Kebanyakan untuk sekarang didistribuskan menggunakan tag next dist di npm. Kami berencana untuk berpindah ke latest setelah semua pustaka pendukung kompatibel, versi stabil.

Vue CLI

Pada v4.5.0, vue-cli menyediakan opsi built-in untuk memilih Vue 3 ketika membuat proyek baru. Anda dapat meningkatkan vue-cli dan menjalankan vue create untuk membuat proyek Vue 3 hari ini.

• Dokumentasi (opens new window)
• GitHub (opens new window)

Vue Router

Vue Router 4.0 menyediakan dukungan terhadao Vue 3 dan mempunyai beberapa perubahan terkini sendiri. Kunjungi panduan migrasi (opens new window) untuk detail lebih lanjut.

• Dokumentasi (opens new window)
• GitHub (opens new window)
• RFCs (opens new window)

Vuex

Vuex 4.0 menyediakan dukungan terhadap Vue 3 dengan banyaknya kesamaan API seperti pada 3.x. Satu hal yang berubah adalah bagaimana plugin diinstal (opens new window).

• Dokumentasi (opens new window)
• GitHub (opens new window)

Ekstensi Devtools

Kami sedang mengerjakan versi terbaru dari Devtools dengan UI yang baru serta refaktor secara interal untuk mendukung banyak versi Vue. Versi baru ini masih dalam tahap beta dan hanya mendukung Vue 3 (untuk sekarang). Integrasi Vuex dan Router juga masih dalam tahap pengembangan.

• Untuk Chrome: Instal dari Chrome web store (opens new window)

  • Catatan: kanal beta mungkin konflik dengan versi stabil dari devtools jadi Anda harus menonaktifkan secara sementara versi stabil agar kanal beta dapat bekerja dengan baik.

• Untuk Firefox: Unduh ekstensi yang ditandai (opens new window) (.xpi berkas di dalam Assets)

Dukungan IDE

Direkomendasikan untuk memakai VSCode (opens new window) dengan ekstensi resmi kami Vetur (opens new window), yang menyediakan dukungan IDE secara komprehensif untuk Vue 3.

Proyek-Proyek Lain

Proyek	npm	Repo
@vue/babel-plugin-jsx	(opens new window)	[GitHub (opens new window)]
eslint-plugin-vue	(opens new window)	[GitHub (opens new window)]
@vue/test-utils	(opens new window)	[GitHub (opens new window)]
vue-class-component	(opens new window)	[GitHub (opens new window)]
vue-loader	(opens new window)	[GitHub (opens new window)]
rollup-plugin-vue	(opens new window)	[GitHub (opens new window)]

INFO

Untuk informasi tambahan tentang kompatibilitas Vue 3 dengan berbagai pustaka dan plugin, cobalah untuk mengecek isu di awesome-vue (opens new window).