Vue.js 1.0.0 Released

Oct 26, 2015

Hi HN! Jika kau tidak terbiasa dengan Vue.js, kau mungkin ingin untuk membaca post blog untuk tingkatreview yang lebih tinggi.

Setelah 300+ commits, 8 alphas, 4 betas dan 2 kandidat perilisan, hari ini saya sangat bangga untuk mengumumkan perilisan dari Vue.js 1.0.0 Evangelion! Banyak terima kasih untuk semua yang berpatisipasi pada proses design ulang API - hal ini tidak akan mungkin terjadi tanpa semua input dari komunitas.

Template Syntax yang Lebih Baik

Template syntax 1.0 memperbaiki banyak isu konsistensi dan membuat template Vue lebih concise dan lebih dapat dibaca pada umumnya. Fitur baru yang paling terlihat adalah syntax singkatan untuk v-on dan v-bind:

<!-- singkatan untuk v-bind:href -->
<a :href="someURL"></a>

<!-- singkatan untuk v-on:click -->
<button @click="onClick"></button>

Saat digunakan pada komponen child, v-on mendengar untuk event buatan sendiri dan v-bind dapat digunakan untuk mengikat properti. Penggunaan singkatan pada komponen child sangatlah ketat:

<item-list
  :items="items"
  @ready="onItemsReady"
  @update="onItemsUpdate">
</item-list>

Pembersihan API

Tujuan keseluruhan dari Vue.js 1.0 adalah untuk membuatnya cocok dengan projek yang lebih besar. Karena itulah banyak pembatalan API. Kecuali untuk API yang jarang digunakan, Alasan paling umum untuk pembatalan API adalah fitur-fiturnya yang menuntun ke pola kerusakan pada proses pemeliharaan. Khususnya, kita membatalkan fitur yang membuat API susah untuk di pelihara dan refactor sebuah komponen isolasi tanpa mempengaruhi isi lain dari proyeknya.

Sebagai contohnya, Resolusi kegunaan awal pada 0.12 mempunyai reaksi negatif ke parent pada pohon komponen. Hal ini membuat aset-aset dapat digunakan pada komponen yang bersifat tidak deterministik dan bagaimana subjek digunakan saat runtime. Di 1.0, semua aset sekarang diselesaikan pada mode ketat dan sudah tidak ada lagi reaksi negatif ke parent. Opsi inherit juga dihapus, karena sering menuntun ke komponen yang berhubungan erat yang susah untuk di refactor.

Render Awal Lebih Cepat

1.0 mengganti v-repeat lama searah dengan v-for. Sebagai bonus untuk menyediakan fungsi yang sama dan ruang lingkup yang lebih intuitif, v-for menyediakan sampai dengan 100% peningkatan performa render awal saat merender daftar yang besar dan tabel!

Alat yang Lebih Kuat

Ada juga hal-hal menarik yang terjadi di luar Vue.js core - vue-loader dan vueify telah menerima peningkatan utama yang termasuk:

• Memuat ulang komponen panas. Disaat komponen *.vue diedit, semua instansi aktif yang panas bertukar tanpa memuat ulang halaman. Hal ini berarti saat membuat perubahan kecil, atau mengutak-atik style atau template, aplikasimu tidak perlu sepenuhnya dimuat ulang; keadaan komponen aplikasi yang ditukar dapat dipertahankan, meningkatkan pengalaman pengembangan secara drastis.

• Ruang lingkup CSS. Cukup dengan menambahkan sifat scoped ke tag komponen style*.vuemu, komponen template dan hasil akhir CSS secara ajaib ditulis ulang untuk memastikan komponen style hanya di terapkan di elemennya sendiri. Yang paling penting, style khusus di komponen parent tidak turun ke komponen child yang nested di dalamnya.

• ES2015 secara settingan awal. JavaScript sedang berevolusi. Kau bisa menulis kode yang lebih rapi dan ekspresif menggunakan syntax terbaru. vue-loader dan vueify sekarang mentranspile JavaScript di *.vue mu, komponen di luar kotak, tanpa dibutuhkannya pengaturan ekstra. Tulislah masa depan JavaScript hari ini!

Digabung dengan vue-router, Vue.js sekarang lebih dari sekadar library - ia menyediakan pondasi kuat untuk membangun SPAs rumit.

Apa Selanjutnya?

Seperti 1.0.0 biasanya menyarankan, inti API akan tetap stabil untuk masa-masa mendatang dan librarynya telah siap untuk penggunaan produksi. Perkembangan kedepan akan fokus pada:

1. Mengembangkan vue-router dan membuatnya siap produksi.

2. Memperlancar pengalaman developer, misalnya alat pengembangan yang lebih baik dan CLI untuk Perancangan projek dan komponen Vue.js.

3. Menyediakan lebih banyak sumber pembelajaran seperti tutorial dan contoh-contoh.