Bonjour, Habr!
Très prochainement, une nouvelle version de Vue.js devrait sortir - 2.6. Sous la coupe, vous trouverez un aperçu des nouvelles fonctionnalités de la prochaine version, y compris la nouvelle syntaxe de slot, Vue.observable () et bien plus encore!
1. Nouvelle syntaxe pour les emplacements délimités
C'est l'un des changements les plus importants. Il comprend:
- Nouvelle directive v-slot combinant slot et slot-scope
- Raccourci pour utiliser des emplacements de portée nommés
La façon la plus simple de comprendre cela est avec un exemple:Comment les emplacements délimités ont été utilisés dans la version 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>
Comment puis-je maintenant:
<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>
Pour l'emplacement par défaut, vous pouvez utiliser une syntaxe spéciale si les emplacements nommés ne sont pas utilisés:
<template> <TestComponent v-slot="{ message }"> <div> {{ `Default slot with message: ${message}` }} </div> </TestComponent> </template>
Et voici le raccourci pour les emplacements nommés:
<template> <TestComponent> <template #text="{ text }"> <div> {{ `Named slot with text: ${text}` }} </div> </template> </TestComponent> </template>
La nouvelle directive peut être utilisée sans aucune variable d'étendue, mais le slot tombera quand même dans $ scopedSlots du parent.
Références:
- Nouvelle syntaxe de v-slot
- Raccourci pour v-slot
2. Argument dynamique de la directive
Si vous voulez un argument dynamique pour v-bind ou v-on, alors dans Vue@2.5.22 vous n'avez qu'une seule option:
<div v-bind="{ [key]: value }"></div> <div v-on="{ [event]: handler }"></div>
Mais il a quelques inconvénients:
- Tout le monde ne connaît pas la possibilité d'utiliser v-bind / v-on sur des objets et les noms de variables dynamiques
- vue-template-compier génère du code inefficace
- v-slot n'a pas de syntaxe similaire pour les objets
Pour s'en débarrasser, Vue@2.6.0 introduit une nouvelle syntaxe:
<div v-bind:[key]="value"></div> <div v-on:[event]="handler"></div>
Exemples d'utilisation: <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>
Références:
3. Création d'objets réactifs à l'aide de Vue.observable ()
Auparavant, pour créer un objet réactif, vous deviez le coller à l'intérieur de l'occurrence du composant vue. Nous avons maintenant une méthode distincte qui rend l'objet réactif - Vue.observable ().
Un objet réactif peut être utilisé en toute sécurité dans les fonctions de rendu et de calcul.
Exemple d'utilisation: 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. Téléchargement des données sur le serveur
Dans la nouvelle mise à jour, vue-server-renderer a changé la stratégie de chargement des données pour SSR.
Auparavant, il nous était conseillé d'appeler les méthodes asyncData () sur les composants obtenus via router.getMatchedComponents ().
La nouvelle version a introduit une méthode spéciale pour les composants - serverPrefetch (). vue-server-renderer l'appellera sur chaque composant et attendra que les promesses résolues soient résolues:
<template> <div v-if="item"> {{ item.name }} </div> </template> <script> export default { </script>
Pour savoir quand l'attente de tous les serverPrefetch () s'est terminée et que l'application a terminé son rendu, dans le contexte de la fonction de rendu du serveur, il a été possible d'ajouter un hook de rendu ():
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. Amélioration de la sortie d'erreur du compilateur
Lors de la compilation html dans une fonction de rendu, vue-template-compiler peut générer des erreurs. Vue utilisée pour afficher une description de l'erreur sans son emplacement, maintenant la nouvelle version montrera où elle se trouve.
Un exemple: <template> <div> <template key="test-key"> {{ message }} </template> </div> </template>
Erreur 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.
Nouvelle sortie d'erreur 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. Détection des erreurs asynchrones
Vue peut désormais détecter même des erreurs asynchrones dans les hooks de cycle de vie et les gestionnaires d'événements.
Un exemple: /* 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>
Erreur après le montage:
[Vue warn]: Error in mounted hook (Promise/async): "Error: Some Error"
Erreur après clic:
[Vue warn]: Error in v-on handler (Promise/async): "Error: Another Error"
7. Nouvelle version pour les navigateurs ESM
Dans la nouvelle version, un autre assembly Vue est ajouté - vue.esm.browser.js. Il est conçu pour les navigateurs prenant en charge les modules ES6.
Ses caractéristiques:- Contient un compilateur HTML dans la fonction de rendu
- Utilise la syntaxe des modules ES6
- Contient du code non traduit
Exemple d'utilisation: <html lang="en"> <head> <title>Document</title> </head> <body> <div id="app"> {{ message }} </div> <script type="module"> </script> </body> </html>
Pour être honnête, j'aimerais voir un autre assembly - le même que vue.esm.browser.js, mais sans le compilateur HTML. Ensuite, je pourrais donner aux navigateurs avec des modules ES6 un code plus récent lorsque je compile les modèles lors de l'assemblage.
8. L'abréviation de v-bind.prop
La directive v-bind a un modificateur spécial - .prop. Vous pouvez voir ce qu'il fait
ici dans la documentation . Je ne l'ai jamais utilisé moi-même et je ne peux pas imaginer le cas quand cela vaut la peine de l'utiliser.
Il y a maintenant une abréviation spéciale pour cela: au lieu d'écrire v-bind: someProperty.prop = "foo", vous pouvez écrire .someProperty = "foo".
Un exemple:Comme c'était à Vue@2.5.22:
<template> <div> <div v-bind:textContent.prop="'Important text content'" /> <div :textContent.prop="'Important text content'" /> </div> </template>
Comme possible à Vue@2.6.0:
<template> <div .textContent="'Important text content'" /> </template>
9. Prise en charge de toString personnalisé ()
Tout est simple ici: si vous remplacez la méthode toString () d'un objet, Vue l'utilisera à la place de JSON.stringify () lors de l'affichage.
Un exemple: /* TestComponent.vue */ <template> <div> {{ message }} </div> </template> <script> export default { data() { return { message: { value: 'qwerty', toString() { return 'Hello Habr!'; }, }, }; }, }; </script>
Dans la version Vue@2.5.22 nous verrons à l'écran:
{ "value": "qwerty" }
Dans la version Vue@2.6.0:
Hello Habr!
10. v-pour travailler avec des objets itérables
Dans la nouvelle version, v-for peut fonctionner avec tous les objets qui implémentent le
protocole itérable , par exemple Map ou Set. Vrai, pour Map and Set dans la version 2.X, la réactivité ne sera pas prise en charge.
Un exemple: /* 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>
Vous pouvez voir toutes les nouvelles fonctionnalités en action dès maintenant en installant la version bêta de Vue:
npm i vue@2.6.0-beta.3
Si vous compilez des fichiers vue pendant l'assemblage ou utilisez des SSR, assurez-vous d'ajouter vue-template-compiler et vue-server-renderer de la même version:
npm i vue-template-compiler@2.6.0-beta.3 vue-server-renderer@2.6.0-beta.3
Mise à jour: Vue 2.6 a été officiellement publié,
ici vous pouvez lire le post d'Evan.
Merci d'avoir lu l'article jusqu'au bout!