Halo, Habr!
Segera, versi baru Vue.js harus dirilis - 2.6. Di bawah potongan Anda akan menemukan gambaran umum fitur baru dari versi berikutnya, termasuk sintaks slot baru, Vue.observable () dan banyak lagi!
1. Sintaks baru untuk slot yang dicakup
Ini adalah salah satu perubahan paling signifikan. Itu termasuk:
- Arahan v-slot baru menggabungkan slot dan ruang-slot
- Pintasan untuk menggunakan slot yang diberi nama bernama
Cara termudah untuk memahami ini adalah dengan contoh:Cara slot scoped digunakan dalam versi Vue@2.5.22:
<template> <TestComponent> <div slot-scope="{ message }"> {{ `Default slot with message: ${message}` }} </div> <div slot="text" slot-scope="{ text }"> {{ `Named slot with text: ${text}` }} </div> </TestComponent> </template>
Bagaimana saya bisa sekarang:
<template> <TestComponent> <template v-slot="{ message }"> <div> {{ `Default slot with message: ${message}` }} </div> </template> <template v-slot:text="{ text }"> <div> {{ `Named slot with text: ${text}` }} </div> </template> </TestComponent> </template>
Untuk slot default, Anda dapat menggunakan sintaks khusus jika slot bernama tidak digunakan:
<template> <TestComponent v-slot="{ message }"> <div> {{ `Default slot with message: ${message}` }} </div> </TestComponent> </template>
Dan inilah jalan pintas untuk slot bernama:
<template> <TestComponent> <template #text="{ text }"> <div> {{ `Named slot with text: ${text}` }} </div> </template> </TestComponent> </template>
Arahan baru dapat digunakan tanpa variabel lingkup apa pun, tetapi kemudian slot tersebut masih akan jatuh ke dalam $ scopedSlots induk.
Referensi:
- Sintaks v-slot baru
- Pintasan untuk v-slot
2. Argumen dinamis dari arahan
Jika Anda menginginkan argumen dinamis untuk v-bind atau v-on, maka di Vue@2.5.22 Anda hanya memiliki satu opsi:
<div v-bind="{ [key]: value }"></div> <div v-on="{ [event]: handler }"></div>
Tetapi dia memiliki beberapa kelemahan:
- Tidak semua orang tahu tentang kemungkinan menggunakan v-bind / v-on pada objek dan tentang nama variabel dinamis
- vue-template-compier menghasilkan kode yang tidak efisien
- v-slot tidak memiliki sintaksis yang sama untuk objek
Untuk menghilangkannya, Vue@2.6.0 memperkenalkan sintaks baru:
<div v-bind:[key]="value"></div> <div v-on:[event]="handler"></div>
Contoh penggunaan: <template> <div> <div v-bind:[key]="value"></div> <div :[key]="value"></div> <div v-on:[event]="handler"></div> <div @[event]="handler"></div> <TestComponent> <template v-slot:[name]> Hello </template> </TestComponent> <TestComponent> <template #[name]> Cool slot </template> </TestComponent> </div> </template>
Referensi:
3. Membuat objek reaktif menggunakan Vue.observable ()
Sebelumnya, untuk membuat objek reaktif, Anda harus memasukkannya ke dalam instance komponen vue. Sekarang kita memiliki metode terpisah yang membuat objek reaktif - Vue.observable ().
Objek reaktif dapat digunakan dengan aman dalam fungsi render dan komputasi.
Contoh penggunaan: import Vue from vue; const state = Vue.observable({ counter: 0, }); export default { render() { return ( <div> {state.counter} <button v-on:click={() => { state.counter++; }}> Increment counter </button> </div> ); }, };
4. Mengunduh data di server
Dalam pembaruan baru, vue-server-renderer telah mengubah strategi pemuatan data untuk SSR.
Sebelumnya, kami disarankan untuk memanggil metode asyncData () pada komponen yang diperoleh melalui router.getMatchedComponents ().
Versi baru ini memperkenalkan metode khusus untuk komponen - serverPrefetch (). vue-server-renderer akan memanggilnya pada setiap komponen dan menunggu janji yang diselesaikan diselesaikan:
<template> <div v-if="item"> {{ item.name }} </div> </template> <script> export default { </script>
Untuk mengetahui kapan menunggu semua serverPrefetch () berakhir dan aplikasi menyelesaikan renderingnya, dalam konteks fungsi server render, dimungkinkan untuk menambahkan kait yang diberikan ():
import { createApp } from './app'; export default context => new Promise((resolve, reject) => { const { app, router, store } = createApp(); const { url } = context; router.push(url); router.onReady(() => { context.rendered = () => {
5. Peningkatan output kesalahan kompiler
Saat mengkompilasi html ke dalam fungsi render, vue-template-compiler dapat melempar kesalahan. Vue digunakan untuk menampilkan deskripsi kesalahan tanpa lokasinya, sekarang versi baru akan menunjukkan tempatnya.
Contoh: <template> <div> <template key="test-key"> {{ message }} </template> </div> </template>
Kesalahan vue-template-compiler@2.5.22:
Error compiling template: <div> <template key="test-key"> {{ message }} </template> </div> - <template> cannot be keyed. Place the key on real elements instead.
Output kesalahan baru vue-template-compiler@2.6.0:
Errors compiling template: <template> cannot be keyed. Place the key on real elements instead. 1 | 2 | <div> 3 | <template key="test-key"> | ^^^^^^^^^^^^^^ 4 | {{ message }} 5 | </template>
6. Menangkap kesalahan asinkron
Vue sekarang dapat menangkap bahkan asinkron kesalahan dalam kait siklus hidup dan penangan acara.
Contoh: /* TestComponent.vue */ <template> <div @click="doSomething()"> Some message </div> </template> <script> export default { methods: { async doSomething() { await this.$nextTick(); throw new Error('Another Error'); }, }, async mounted() { await this.$nextTick(); throw new Error('Some Error'); }, }; </script>
Kesalahan setelah pemasangan:
[Vue warn]: Error in mounted hook (Promise/async): "Error: Some Error"
Kesalahan setelah klik:
[Vue warn]: Error in v-on handler (Promise/async): "Error: Another Error"
7. Build baru untuk browser ESM
Dalam versi baru, rakitan Vue lainnya ditambahkan - vue.esm.browser.js. Ini dirancang untuk browser yang mendukung Modul ES6.
Fitur-fiturnya:- Berisi kompiler HTML dalam fungsi render
- Menggunakan Sintaks Modul ES6
- Berisi kode yang tidak diterjemahkan
Contoh penggunaan: <html lang="en"> <head> <title>Document</title> </head> <body> <div id="app"> {{ message }} </div> <script type="module"> </script> </body> </html>
Sejujurnya, saya ingin melihat perakitan lain - sama seperti vue.esm.browser.js, tetapi tanpa kompiler HTML. Maka saya akan dapat memberi browser dengan Modul ES6 kode yang lebih baru ketika saya mengkompilasi template selama perakitan.
8. Singkatan untuk v-bind.prop
Arahan v-bind memiliki pengubah khusus - .prop. Anda dapat melihat apa yang dia lakukan
di sini dalam dokumentasi . Saya sendiri belum pernah menggunakannya dan saya tidak bisa membayangkan kasus itu ketika layak digunakan.
Sekarang ada singkatan khusus untuk itu: alih-alih menulis v-bind: someProperty.prop = "foo", Anda dapat menulis .someProperty = "foo".
Contoh:Seperti di Vue@2.5.22:
<template> <div> <div v-bind:textContent.prop="'Important text content'" /> <div :textContent.prop="'Important text content'" /> </div> </template>
Mungkin di Vue@2.6.0:
<template> <div .textContent="'Important text content'" /> </template>
9. Dukungan untuk custom toString ()
Semuanya sederhana di sini: jika Anda mengganti metode toString () dari suatu objek, maka Vue akan menggunakannya sebagai ganti JSON.stringify () saat ditampilkan.
Contoh: /* TestComponent.vue */ <template> <div> {{ message }} </div> </template> <script> export default { data() { return { message: { value: 'qwerty', toString() { return 'Hello Habr!'; }, }, }; }, }; </script>
Dalam versi Vue@2.5.22 kita akan melihat di layar:
{ "value": "qwerty" }
Dalam versi Vue@2.6.0:
Hello Habr!
10. v-untuk bekerja dengan objek yang dapat diubah
Dalam versi baru, v-for dapat bekerja dengan objek apa pun yang mengimplementasikan
protokol iterable , misalnya Map atau Set. Benar, untuk Map dan Set dalam versi 2.X reaktivitas tidak akan didukung.
Contoh: /* TestComponent.vue */ <template> <div> <div v-for="item in items" :key="item" > {{ item }} </div> </div> </template> <script> export default { data() { return { items: new Set([4, 2, 6]), }; }, }; </script>
Anda dapat melihat semua fitur baru beraksi sekarang dengan menginstal versi beta Vue:
npm i vue@2.6.0-beta.3
Jika Anda mengkompilasi file vue selama perakitan atau menggunakan SSR, pastikan untuk menambahkan vue-template-compiler dan vue-server-renderer dari versi yang sama:
npm i vue-template-compiler@2.6.0-beta.3 vue-server-renderer@2.6.0-beta.3
Pembaruan: Vue 2.6 secara resmi dirilis, di
sini Anda dapat membaca pos Evan.
Terima kasih telah membaca artikel sampai akhir!