Hola Habr!
Muy pronto, se lanzará una nueva versión de Vue.js: 2.6. Debajo del corte, encontrará una descripción general de las nuevas características de la próxima versión, incluida la nueva sintaxis de ranura, Vue.observable () y mucho más.
1. Nueva sintaxis para ranuras con ámbito
Este es uno de los cambios más significativos. Incluye:
- Nueva directiva v-slot que combina slot y slot-scope
- Acceso directo para usar ranuras con ámbito con nombre
La forma más fácil de entender esto es con un ejemplo:Cómo se utilizaron las ranuras de ámbito en la versión 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>
¿Cómo puedo ahora:
<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>
Para la ranura predeterminada, puede usar una sintaxis especial si no se usan las ranuras con nombre:
<template> <TestComponent v-slot="{ message }"> <div> {{ `Default slot with message: ${message}` }} </div> </TestComponent> </template>
Y aquí está el acceso directo para las ranuras con nombre:
<template> <TestComponent> <template #text="{ text }"> <div> {{ `Named slot with text: ${text}` }} </div> </template> </TestComponent> </template>
La nueva directiva se puede usar sin ninguna variable de alcance, pero la ranura seguirá estando dentro de $ scopedSlots de los padres.
Referencias
- Nueva sintaxis de v-slot
- Atajo para v-slot
2. Argumento dinámico de la directiva.
Si desea un argumento dinámico para v-bind o v-on, entonces en Vue@2.5.22 solo tiene una opción:
<div v-bind="{ [key]: value }"></div> <div v-on="{ [event]: handler }"></div>
Pero tiene un par de desventajas:
- No todos conocen la posibilidad de usar v-bind / v-on en objetos y sobre nombres de variables dinámicas
- vue-template-compier genera código ineficiente
- v-slot no tiene una sintaxis similar para los objetos
Para deshacerse de ellos, Vue@2.6.0 presenta una nueva sintaxis:
<div v-bind:[key]="value"></div> <div v-on:[event]="handler"></div>
Ejemplos de uso: <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>
Referencias
3. Crear objetos reactivos usando Vue.observable ()
Anteriormente, para crear un objeto reactivo, tenía que pegarlo dentro de la instancia del componente vue. Ahora tenemos un método separado que hace que el objeto sea reactivo: Vue.observable ().
Un objeto reactivo se puede utilizar de forma segura en render y funciones calculadas.
Ejemplo de uso: 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. Descargando datos en el servidor
En una nueva actualización, vue-server-renderer cambió la estrategia de carga de datos para SSR.
Anteriormente, se nos aconsejaba llamar a métodos asyncData () en componentes obtenidos a través de router.getMatchedComponents ().
La nueva versión introdujo un método especial para componentes: serverPrefetch (). vue-server-renderer lo llamará en cada componente y esperará a que se resuelvan las promesas resueltas:
<template> <div v-if="item"> {{ item.name }} </div> </template> <script> export default { </script>
Para saber cuándo finalizó la espera de todo serverPrefetch () y la aplicación completó su representación, en el contexto de la función de representación del servidor, fue posible agregar un enlace de renderizado ():
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. Salida de error del compilador mejorada
Al compilar html en una función de representación, vue-template-compiler puede generar errores. Vue solía mostrar una descripción del error sin su ubicación, ahora la nueva versión mostrará dónde está.
Un ejemplo: <template> <div> <template key="test-key"> {{ message }} </template> </div> </template>
Error 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.
Nueva salida de error 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. Capturando errores asincrónicos
Vue ahora puede detectar incluso errores asincrónicos en ganchos de ciclo de vida y controladores de eventos.
Un ejemplo: /* 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>
Error después del montaje:
[Vue warn]: Error in mounted hook (Promise/async): "Error: Some Error"
Error después de hacer clic:
[Vue warn]: Error in v-on handler (Promise/async): "Error: Another Error"
7. Nueva compilación para navegadores ESM
En la nueva versión, se agrega otro ensamblaje de Vue: vue.esm.browser.js. Está diseñado para navegadores que admiten módulos ES6.
Sus características:- Contiene el compilador HTML en la función de render
- Utiliza la sintaxis de los módulos ES6
- Contiene código no traducido
Ejemplo de uso: <html lang="en"> <head> <title>Document</title> </head> <body> <div id="app"> {{ message }} </div> <script type="module"> </script> </body> </html>
Para ser honesto, me gustaría ver otro ensamblaje, el mismo que vue.esm.browser.js, pero sin el compilador HTML. Entonces podría dar a los navegadores con módulos ES6 código más reciente cuando compile las plantillas durante el ensamblaje.
8. La abreviatura de v-bind.prop
La directiva v-bind tiene un modificador especial: .prop. Puedes ver lo que está haciendo
aquí en la documentación . Yo mismo nunca lo he usado y no puedo imaginar el caso cuando vale la pena usarlo.
Ahora hay una abreviatura especial para ello: en lugar de escribir v-bind: someProperty.prop = "foo", puede escribir .someProperty = "foo".
Un ejemplo:Como fue en Vue@2.5.22:
<template> <div> <div v-bind:textContent.prop="'Important text content'" /> <div :textContent.prop="'Important text content'" /> </div> </template>
Como sea posible en Vue@2.6.0:
<template> <div .textContent="'Important text content'" /> </template>
9. Soporte para toString personalizado ()
Es simple: si anula el método toString () de un objeto, Vue lo usará en lugar de JSON.stringify () cuando se muestre.
Un ejemplo: /* TestComponent.vue */ <template> <div> {{ message }} </div> </template> <script> export default { data() { return { message: { value: 'qwerty', toString() { return 'Hello Habr!'; }, }, }; }, }; </script>
En la versión Vue@2.5.22 veremos en la pantalla:
{ "value": "qwerty" }
En la versión Vue@2.6.0:
Hello Habr!
10. v-para trabajar con objetos iterables
En la nueva versión, v-for puede trabajar con cualquier objeto que implemente el
protocolo iterable , por ejemplo, Map o Set. Es cierto que para Map and Set en la versión 2.X no se admitirá la reactividad.
Un ejemplo: /* 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>
Puede ver todas las nuevas funciones en acción ahora mismo instalando la versión beta de Vue:
npm i vue@2.6.0-beta.3
Si compila archivos vue durante el ensamblaje o usa SSR, asegúrese de agregar vue-template-compiler y vue-server-renderer de la misma versión:
npm i vue-template-compiler@2.6.0-beta.3 vue-server-renderer@2.6.0-beta.3
Actualización: Vue 2.6 fue lanzado oficialmente,
aquí puedes leer la publicación de Evan.
¡Gracias por leer el artículo hasta el final!