Olá Habr!
Muito em breve, uma nova versão do Vue.js deve ser lançada - 2.6. Abaixo deste corte, você encontrará uma visão geral dos novos recursos da próxima versão, incluindo a nova sintaxe do slot, Vue.observable () e muito mais!
1. Nova sintaxe para slots com escopo definido
Essa é uma das mudanças mais significativas. Inclui:
- Nova diretiva de slot em v que combina slot e escopo de slot
- Atalho para usar slots com escopo nomeado
A maneira mais fácil de entender isso é com um exemplo:Como os slots com escopo foram usados na versão 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>
Como posso agora:
<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 o slot padrão, você pode usar sintaxe especial se os slots nomeados não forem usados:
<template> <TestComponent v-slot="{ message }"> <div> {{ `Default slot with message: ${message}` }} </div> </TestComponent> </template>
E aqui está o atalho para os slots nomeados:
<template> <TestComponent> <template #text="{ text }"> <div> {{ `Named slot with text: ${text}` }} </div> </template> </TestComponent> </template>
A nova diretiva pode ser usada sem nenhuma variável de escopo, mas o slot ainda cairá nos $ scopedSlots do pai.
Referências:
- Nova sintaxe do slot v
- Atalho para slot V
2. Argumento dinâmico da diretiva
Se você deseja um argumento dinâmico para v-bind ou v-on, em Vue@2.5.22, você tem apenas uma opção:
<div v-bind="{ [key]: value }"></div> <div v-on="{ [event]: handler }"></div>
Mas ele tem algumas desvantagens:
- Nem todo mundo sabe sobre a possibilidade de usar v-bind / v-on em objetos e sobre nomes de variáveis dinâmicas
- vue-template-compier gera código ineficiente
- O slot v não possui sintaxe semelhante para objetos
Para se livrar deles, Vue@2.6.0 introduz uma nova sintaxe:
<div v-bind:[key]="value"></div> <div v-on:[event]="handler"></div>
Exemplos 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>
Referências:
3. Criando objetos reativos usando Vue.observable ()
Anteriormente, para criar um objeto reativo, era necessário colocá-lo dentro da instância do componente vue. Agora, temos um método separado que torna o objeto reativo - Vue.observable ().
Um objeto reativo pode ser usado com segurança nas funções de renderização e computação.
Exemplo 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. Fazendo Download de Dados no Servidor
Na nova atualização, o vue-server-renderer mudou a estratégia de carregamento de dados para SSR.
Anteriormente, é recomendável chamar métodos asyncData () nos componentes obtidos por meio de router.getMatchedComponents ().
A nova versão introduziu um método especial para componentes - serverPrefetch (). O vue-server-renderer o chamará em cada componente e aguardará que as promessas resolvidas sejam resolvidas:
<template> <div v-if="item"> {{ item.name }} </div> </template> <script> export default { </script>
Para descobrir quando a espera por todos serverPrefetch () terminou e o aplicativo concluiu sua renderização, no contexto da função de renderização do servidor, tornou-se possível adicionar um gancho 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. Saída aprimorada de erro do compilador
Ao compilar html em uma função de renderização, o vue-template-compiler pode gerar erros. Como o Vue costumava exibir uma descrição do erro sem a sua localização, agora a nova versão mostra onde está.
Um exemplo: <template> <div> <template key="test-key"> {{ message }} </template> </div> </template>
Erro 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.
Nova saída de erro 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 erros assíncronos
Agora, o Vue pode detectar erros assíncronos em ganchos do ciclo de vida e manipuladores de eventos.
Um exemplo: /* 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>
Erro após montagem:
[Vue warn]: Error in mounted hook (Promise/async): "Error: Some Error"
Erro após o clique:
[Vue warn]: Error in v-on handler (Promise/async): "Error: Another Error"
7. Nova compilação para navegadores ESM
Na nova versão, outro assembly Vue é adicionado - vue.esm.browser.js. Ele foi desenvolvido para navegadores que suportam os módulos ES6.
Suas características:- Contém compilador HTML na função de renderização
- Usa a sintaxe dos módulos ES6
- Contém código não traduzido
Exemplo de uso: <html lang="en"> <head> <title>Document</title> </head> <body> <div id="app"> {{ message }} </div> <script type="module"> </script> </body> </html>
Para ser sincero, gostaria de ver outro assembly - o mesmo que vue.esm.browser.js, mas sem o compilador HTML. Eu seria capaz de fornecer aos navegadores com módulos ES6 um código mais recente ao compilar os modelos durante a montagem.
8. A abreviação de v-bind.prop
A diretiva v-bind possui um modificador especial - .prop. Você pode ver o que ele está fazendo
aqui na documentação . Eu nunca o usei e não consigo imaginar o caso em que vale a pena usá-lo.
Agora existe uma abreviação especial para isso: em vez de escrever v-bind: someProperty.prop = "foo", você pode escrever .someProperty = "foo".
Um exemplo:Como foi em Vue@2.5.22:
<template> <div> <div v-bind:textContent.prop="'Important text content'" /> <div :textContent.prop="'Important text content'" /> </div> </template>
Possível em Vue@2.6.0:
<template> <div .textContent="'Important text content'" /> </template>
9. Suporte para toString personalizado ()
Tudo é simples aqui: se você substituir o método toString () de um objeto, o Vue o usará em vez de JSON.stringify () quando exibido.
Um exemplo: /* TestComponent.vue */ <template> <div> {{ message }} </div> </template> <script> export default { data() { return { message: { value: 'qwerty', toString() { return 'Hello Habr!'; }, }, }; }, }; </script>
Na versão Vue@2.5.22, veremos na tela:
{ "value": "qwerty" }
Na versão Vue@2.6.0:
Hello Habr!
10. v-for work with iterable objects
Na nova versão, o v-for pode funcionar com qualquer objeto que implemente o
protocolo iterável , por exemplo, Map ou Set. Verdadeiro, para Map e Set na versão 2.X, a reatividade não será suportada.
Um exemplo: /* 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>
Você pode ver todos os novos recursos em ação agora instalando a versão beta do Vue:
npm i vue@2.6.0-beta.3
Se você compilar arquivos vue durante a montagem ou usar SSRs, certifique-se de adicionar vue-template-compiler e vue-server-renderer da mesma versão:
npm i vue-template-compiler@2.6.0-beta.3 vue-server-renderer@2.6.0-beta.3
Atualização: Vue 2.6 foi lançado oficialmente,
aqui você pode ler o post de Evan.
Obrigado por ler o artigo até o fim!