Lançada a versão 2.6 do Vuejs

Um dia após o Vuejs completar 5 aninhos, a versão 2.6 do Vuejs finalmente foi lançada sob o codnome “Macross”.

Como no último ano a dedicação da equipe estava voltada para o Vue Cli 3, as versões do Vue 2.X não estavam recebendo atualizações mais significativas. E esta hora chegou! A versão 2.6 combina várias melhorias internas, e alguns novos recursos que serão comentados nesse post. Se você deseja ver um detalhamento completo das mudanças, acesse este link.

Slots

Houveram mudanças significativas na especificação dos slots, como por exemplo uma nova sintaxe. Mas é preciso deixar claro que a sintaxe antiga também vai continuar funcionando.

Nova sintaxe

Agora a sintaxe dos slots está baseada em diretivas, o que difere um pouco da versão anterior, onde tínhamos um componente chamado “slot”.

Slots simples

<!-- Antiga -->
<foo>
  <slot></slot>
</foo>

<!-- Nova -->
<foo v-slot></foo>

Slots com parâmetros

<!-- Antiga -->
<foo>
  <template slot-scope="{ msg }">
    
  </template>
</foo>

<!-- Nova -->
<foo v-slot="{ msg }">
  
</foo>

Slots com nomes

<!-- Antiga -->
<foo>
  <template slot="one" slot-scope="{ msg }">
    text slot: 
  </template>

  <div slot="two" slot-scope="{ msg }">
    element slot: 
  </div>
</foo>

<!-- Nova -->
<foo>
  <template v-slot:one="{ msg }">
    text slot: 
  </template>

  <template v-slot:two="{ msg }">
    <div>
      element slot: 
    </div>
  </template>
</foo>

A nova sintaxe não afeta a sintaxe antiga, ambas continuarão sendo totalmente compatíveis

Outras melhorias

Os slots também tiveram melhorias de performance, detalhados neste link. Quando se usa a nova diretiva v-slot, estas melhorias serão automaticamente melhoradas.

Slots agora também são expostos no this.$scopedSlots como funções, o que possibilita a sua manipulação através de render functions.

Gerenciamento de erros assíncronos

O Vue já possui um gerenciamento de erros global através do hook errorHandler, que pode ser definido através da instância de configuração do Vue.

Vue.config.errorHandler = function (err, vm, info) {
  // handle error
  // `info` is a Vue-specific error info, e.g. which lifecycle hook
  // the error was found in. Only available in 2.2.0+
}

Na versão 2.6 o errorHandler também suporta chamadas assíncronas (e eventos v-on) com o uso da técnica async/await, que está ganhando popularidade no desenvolvimento javascript.

Basicamente, ao criar um error handler para a sua aplicação, como por exemplo:

// main.js
import Vue from "vue";
import App from "./App";

Vue.config.productionTip = false;

Vue.config.errorHandler = function(err, vm, info) {
  // handle error
  // `info` is a Vue-specific error info, e.g. which lifecycle hook
  // the error was found in. Only available in 2.2.0+
  console.error("ErrorHandler em ação: " + err.message);
};

/* eslint-disable no-new */
new Vue({
  el: "#app",
  components: { App },
  template: "<App/>"
});

Pode-se usar async/await que o erro será capturado, como por exemplo:

<template>
  ...
</template>

<script>

export default {
  name: "App",
  async mounted() {
    console.log("App mounted");
    await new Promise(resolve => setTimeout(resolve, 5000));
    throw new Error("Um simples erro após 5 segundos");
  }
};
</script>

Com isso, não é necessário capturar o erro que possa ocorrer no promise do await através do try-catch, permitindo que o errorHandler gerencie o erro.

Você pode conferir esse comportamento neste link (veja o console para conferir o resultado).

Diretivas dinâmicas

A nova sintaxe dos slots trouxe também uma nova funcionalidade. O uso de diretivas dinâmicas. O seu uso mais básico seria:

<div v-bind:[key]="value"></div>

Onde key é uma variável dinâmica. Essa nova funcionalidade foi criada para atender a nova diretiva do v-slot.

<my-component>
  <template v-slot:[slotName]>
    Dynamic slot name
  </template>
</my-component>

Maiores detalhes neste link.

Mensagens de erro

As mensagens de erro do compilador foram melhoradas, como no exemplo a seguir:

Criação explícita de objetos reativos

A versão 2.6 traz uma nova API para criar explicitamente objetos reativos:

const  reactiveState  =  Vue . observável ({
  contagem :  0
})

O objeto resultante pode ser usado em propriedades computadas ou render functions.

Por exemplo:

const state = Vue.observable({
  count: 0
});

/* eslint-disable no-new */
new Vue({
  el: "#app",
  render(h) {
    return h('button', {
      on: { click: () => { state.count++ } }
    }, `count is: ${state.count}`)
  }
});

Pre-fetching de dados em SSR - Server Side Rendering

O novo hook serverPrefetch permite o pre-fetch de dados para qualquer componente. projetos como Nuxt e VueApollo irão se beneficiar com essa funcionalidade, simplificando suas implementações com este novo recurso.

Módulo ES compilado diretamente

O Vue 2.6 passa a suportar uma compilação do módulo ES para uso direto no navegador:

<script type="module">
import Vue from 'https://unpkg.com/vue/dist/vue.esm.browser.js'
  
new Vue({
  // ...
})
</script>