Hallo Habr!
Sehr bald sollte eine neue Version von Vue.js veröffentlicht werden - 2.6. Unter dem Schnitt finden Sie eine Übersicht über die neuen Funktionen der nächsten Version, einschließlich der neuen Slot-Syntax, Vue.observable () und vielem mehr!
1. Neue Syntax für Slots mit Gültigkeitsbereich
Dies ist eine der wichtigsten Änderungen. Es beinhaltet:
- Neue V-Slot-Direktive, die Slot und Slot-Scope kombiniert
- Verknüpfung für die Verwendung von Slots mit benanntem Gültigkeitsbereich
Der einfachste Weg, dies zu verstehen, ist anhand eines Beispiels:Wie Slots mit Gültigkeitsbereich in Version Vue@2.5.22 verwendet wurden:
<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>
Wie kann ich jetzt:
<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>
Für den Standardsteckplatz können Sie eine spezielle Syntax verwenden, wenn benannte Steckplätze nicht verwendet werden:
<template> <TestComponent v-slot="{ message }"> <div> {{ `Default slot with message: ${message}` }} </div> </TestComponent> </template>
Und hier ist die Verknüpfung für benannte Slots:
<template> <TestComponent> <template #text="{ text }"> <div> {{ `Named slot with text: ${text}` }} </div> </template> </TestComponent> </template>
Die neue Direktive kann ohne Bereichsvariablen verwendet werden, aber dann fällt der Steckplatz immer noch in die $ scopedSlots des übergeordneten Elements.
Referenzen:
- Neue V-Slot-Syntax
- Verknüpfung für V-Slot
2. Dynamisches Argument der Richtlinie
Wenn Sie ein dynamisches Argument für v-bind oder v-on wünschen, haben Sie in Vue@2.5.22 nur eine Option:
<div v-bind="{ [key]: value }"></div> <div v-on="{ [event]: handler }"></div>
Aber er hat ein paar Nachteile:
- Nicht jeder kennt die Möglichkeit der Verwendung von v-bind / v-on für Objekte und die Namen dynamischer Variablen
- vue-template-compier generiert ineffizienten Code
- v-slot hat keine ähnliche Syntax für Objekte
Um sie loszuwerden, führt Vue@2.6.0 eine neue Syntax ein:
<div v-bind:[key]="value"></div> <div v-on:[event]="handler"></div>
Anwendungsbeispiele: <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>
Referenzen:
3. Erstellen reaktiver Objekte mit Vue.observable ()
Um ein reaktives Objekt zu erstellen, mussten Sie es zuvor in die Instanz der vue-Komponente stecken. Jetzt haben wir eine separate Methode, die das Objekt reaktiv macht - Vue.observable ().
Ein reaktives Objekt kann sicher in Render- und Rechenfunktionen verwendet werden.
Anwendungsbeispiel: 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. Daten auf den Server herunterladen
In dem neuen Update hat vue-server-renderer die Datenladestrategie für SSR geändert.
Zuvor wurde empfohlen, asyncData () -Methoden für Komponenten aufzurufen, die über router.getMatchedComponents () abgerufen wurden.
Mit der neuen Version wurde eine spezielle Methode für Komponenten eingeführt - serverPrefetch (). vue-server-renderer ruft es für jede Komponente auf und wartet, bis die aufgelösten Versprechen gelöst sind:
<template> <div v-if="item"> {{ item.name }} </div> </template> <script> export default { </script>
Um herauszufinden, wann das Warten auf alle serverPrefetch () beendet war und die Anwendung das Rendern abgeschlossen hat, konnte im Kontext der Server-Renderfunktion ein render () -Hook hinzugefügt werden:
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. Verbesserte Ausgabe von Compilerfehlern
Beim Kompilieren von HTML in eine Renderfunktion kann der vue-template-compiler Fehler auslösen. Vue hat früher eine Beschreibung des Fehlers ohne seinen Standort angezeigt. Jetzt zeigt die neue Version, wo er sich befindet.
Ein Beispiel: <template> <div> <template key="test-key"> {{ message }} </template> </div> </template>
Fehler 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.
Neue Fehlerausgabe 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. Asynchrone Fehler abfangen
Vue kann jetzt sogar asynchrone Fehler in Lifecycle-Hooks und Event-Handlern abfangen.
Ein Beispiel: /* 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>
Fehler nach dem Mounten:
[Vue warn]: Error in mounted hook (Promise/async): "Error: Some Error"
Fehler nach dem Klicken:
[Vue warn]: Error in v-on handler (Promise/async): "Error: Another Error"
7. Neuer Build für ESM-Browser
In der neuen Version wird eine weitere Vue-Assembly hinzugefügt - vue.esm.browser.js. Es wurde für Browser entwickelt, die ES6-Module unterstützen.
Seine Eigenschaften:- Enthält den HTML-Compiler in der Renderfunktion
- Verwendet die ES6-Modulsyntax
- Enthält nicht übersetzten Code
Anwendungsbeispiel: <html lang="en"> <head> <title>Document</title> </head> <body> <div id="app"> {{ message }} </div> <script type="module"> </script> </body> </html>
Um ehrlich zu sein, würde ich gerne eine andere Assembly sehen - die gleiche wie vue.esm.browser.js, jedoch ohne den HTML-Compiler. Dann könnte ich Browsern mit ES6-Modulen neueren Code geben, wenn ich die Vorlagen während der Montage kompiliere.
8. Die Abkürzung für v-bind.prop
Die v-bind-Direktive hat einen speziellen Modifikator - .prop. Sie können
hier in der Dokumentation sehen, was er tut. Ich selbst habe es noch nie benutzt und kann mir den Fall nicht vorstellen, wenn es sich lohnt, es zu benutzen.
Es gibt jetzt eine spezielle Abkürzung dafür: Anstatt v-bind zu schreiben: someProperty.prop = "foo", können Sie .someProperty = "foo" schreiben.
Ein Beispiel:Wie es bei Vue@2.5.22 war:
<template> <div> <div v-bind:textContent.prop="'Important text content'" /> <div :textContent.prop="'Important text content'" /> </div> </template>
Wie möglich unter Vue@2.6.0:
<template> <div .textContent="'Important text content'" /> </template>
9. Unterstützung für benutzerdefinierte toString ()
Es ist ganz einfach: Wenn Sie die toString () -Methode eines Objekts überschreiben, verwendet Vue sie bei der Anzeige anstelle von JSON.stringify ().
Ein Beispiel: /* TestComponent.vue */ <template> <div> {{ message }} </div> </template> <script> export default { data() { return { message: { value: 'qwerty', toString() { return 'Hello Habr!'; }, }, }; }, }; </script>
In Version Vue@2.5.22 sehen wir auf dem Bildschirm:
{ "value": "qwerty" }
In Version Vue@2.6.0:
Hello Habr!
10. v-for Arbeit mit iterierbaren Objekten
In der neuen Version kann v-for mit allen Objekten arbeiten, die das
iterierbare Protokoll implementieren, z. B. Map oder Set. True, für Map and Set in Version 2.X wird die Reaktivität nicht unterstützt.
Ein Beispiel: /* 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>
Sie können alle neuen Funktionen jetzt in Aktion sehen, indem Sie die Beta-Version von Vue installieren:
npm i vue@2.6.0-beta.3
Wenn Sie Vue-Dateien während der Assembly kompilieren oder SSRs verwenden, müssen Sie den Vue-Template-Compiler und den Vue-Server-Renderer derselben Version hinzufügen:
npm i vue-template-compiler@2.6.0-beta.3 vue-server-renderer@2.6.0-beta.3
Update: Vue 2.6 wurde offiziell veröffentlicht,
hier können Sie den Beitrag von Evan lesen.
Vielen Dank, dass Sie den Artikel bis zum Ende gelesen haben!