Vue 2.6 lançado
Este artigo é uma tradução do artigo escrito pelo Evan You — Vue 2.6 released.
Ontem acabamos de celebrar o 5º Vueniversário — hoje estamos animados em anunciar o lançamento do Vue 2.6 “Macross”!
No ano passado, passamos muito tempo trabalhando e prototipando o novo CLI 3.0. Como resultado, o Vue core 2.x não recebeu atualizações importantes por um bom tempo. Já estava na hora! Esta versão combina várias melhorias substanciais, alterações internas e novos recursos destacados neste post. Para detalhes completos, certifique-se de verificar também a nota de lançamento completa no GitHub.
Slots: Nova Sintaxe, Melhorias de Desempenho & Alinhamento com 3.0
Slots é um mecanismo importante que permite a composição flexível de componentes no Vue. Durante a prototipagem para o 3.0, descobrimos várias maneiras de melhorá-lo. Algumas delas podem ser introduzidas sem quebrar as alterações, o que nos permite enviá-las em uma versão menor 2.x. Para aqueles que precisam de mudanças significativas, também estamos tentando fornecer alternativas progressivas em 2.x que tornem as migrações futuras mais fáceis.
Nova sintaxe
A primeira etapa é a nova sintaxe de slots com scoped slots. Nós propusemos, discutimos e experimentamos vários projetos diferentes (1, 2, 3) e, eventualmente, desembarcamos na nova sintaxe v-slot descrita neste RFC. Aqui está um breve exemplo usando slots nomeados:
A nova sintaxe unifica o uso de slots normais e com scoped slots em uma única diretiva e impõe o uso de named slots mais explícitos e legíveis. Também é totalmente compatível com a sintaxe existente, o que nos permite entrega-lo hoje na versão 2.6.
Se você já estiver familiarizado com a sintaxe de slot existente, recomendamos que você leia o RFC para entender melhor a lógica por trás da nova sintaxe. Se você ainda não está familiarizado com os slots, é recomendável consultar a documentação atualizada dos slots.
Melhorias de desempenho
Outra melhoria para os slots que gostaríamos de ver na 3.0 é a unificação dos slots vs. scoped slots em termos de implementação, devido à vantagem de desempenho dos scoped slots. Slots normais são renderizados durante o ciclo de renderização do pai. Quando uma dependência de um slot é alterada, ele faz com que os componentes pai e filho sejam renderizados novamente. Scoped slots, por outro lado, são compilados em funções inline e chamados durante o ciclo de renderização do componente filho. Isso significa que quaisquer dependências de dados dependentes de um scoped slot são coletadas pelo componente filho, resultando em atualizações mais precisas. Na versão 2.6, introduzimos uma otimização que garante ainda que as mutações de dependência do escopo pai afetem apenas o pai e não forçarão mais o componente filho a atualizar se ele usar apenas os scoped slots.
Além do que:
- Todos os slots usando a nova sintaxe v-slot são compilados em scoped slot. Isso significa que todos os slots usando a nova sintaxe obtêm automaticamente as melhorias de desempenho;
- Todos os slots normais agora também são expostos como this.$scopedSlots como funções. Isso significa que os usuários que usam funções de renderização, em vez de modelos, agora podem sempre usar this.$scopedSlots sem se preocupar com o tipo de slots que estão sendo transmitidos.
No 3.0, não haverá mais a distinção entre scoped slots e non-scoped slots— todos os slots usarão a mesma sintaxe unificada, serão compilados no mesmo formato e terão o mesmo desempenho ideal.
Manipulação de Erros Assíncronos
O mecanismo de tratamento de erros embutido do Vue (hook errorCaptured no componente e hook global errorHandler) agora também captura erros dentro dos manipuladores v-on. Além disso, se algum dos hooks do ciclo de vida ou manipuladores de eventos executar operações assíncronas, você poderá retornar uma Promise da função para que todos os erros não detectados dessa cadeia de Promise também sejam enviados para os manipuladores de erro. Torna-se ainda mais fácil se você estiver usando async/await, já que as funções assíncronas retornam implicitamente Promises:
Argumentos da Diretiva Dinâmica
Os argumentos da diretiva agora podem aceitar expressões JavaScript dinâmicas:
Mais detalhes podem ser encontrados neste RFC. Convenientemente, se o valor do argumento for nulo, a binding/listener será removida.
Nota para os autores de bibliotecas: esse recurso requer que o tempo de execução do Vue seja da versão 2.6.0 ou superior. Se você envia componentes pré-compilados e deseja manter a compatibilidade com versões anteriores a 2.6, evite usá-los em seu código-fonte.
Pedaços de código em mensagens de aviso do compilador
Graças ao stellar pull request do usuário do GitHub @gzzhanghao, a partir da versão 2.6, a maioria dos avisos de compilação dos templates agora vem com informações sobre o intervalo de origem. Isso nos permitiu gerar bons pedaços de código para esses avisos:
Criação Explícita de Objetos Reativos Independentes
2.6 introduz uma nova API global para criar explicitamente objetos reativos independentes:
O objeto resultante pode ser usado diretamente nas computed properties ou render functions, e acionará as atualizações apropriadas quando houver mutação.
Pré-busca de dados durante a renderização do lado do servidor
O novo hook serverPrefetch permite que qualquer componente (em vez de apenas componentes no nível da rota) pré-busque dados durante a renderização do lado do servidor, permitindo um uso mais flexível e reduzindo o acoplamento entre a busca de dados e o roteador. Projetos como o Nuxt e o vue-apollo já estão planejando simplificar suas implementações usando esse novo recurso.
Módulo ES Build for Direct Import
Anteriormente, nossa compilação do Módulo ES era destinada principalmente para uso com empacotadores. Essas compilações contêm o uso de variáveis de ambiente que devem ser substituídas em tempo de compilação. O Vue 2.6 agora também fornece uma compilação do módulo ES destinada ao uso direto no navegador:
Mudanças Internas Importantes
Revertendo nextTick para Microtask
Em 2.5.0, fizemos um ajuste interno que fez com que nextTick usasse Macrotasks em vez de Microtasks para enfileirar atualizações se a atualização fosse acionada em um manipulador de eventos v-on. Isso foi originalmente planejado para corrigir alguns casos isolados de navegadores, mas, por sua vez, levou a vários outros problemas. Na 2.6, encontramos uma correção mais simples para o problema original, que nos permite reverter o nextTick para usar consistentemente o Microtasks em todos os casos.
Se você estiver interessado em mais detalhes técnicos, confira aqui.
Funções sobre this.$scopedSlots agora sempre retornam Arrays
(Essa alteração afeta apenas os usuários de render function.) Nas render functions, os scoped slots são expostos em this.$scopedSlots como funções. Até agora, chamar uma scoped slot function pode retornar um único VNode ou um Array de VNodes com base no que o componente pai está transmitindo. Isso era, honestamente, um descuido, pois torna o tipo de valor de retorno indeterminado e pode levar a casos isolados não intencionais. Em 2.6, as funções de slot com escopo agora têm a garantia de retornar um Array of VNodes ou undefined. Isso pode afetar algum código existente se ele não estiver verificando adequadamente possíveis valores de retorno do Array. Mais detalhes aqui.
Agradecimentos
Agradecemos aos colaboradores que contribuíram com pull requests nesta versão e a todos os membros da comunidade que participaram das discussões sobre RFC.
Agradeço o apoio que a Nayara Alves deu na tradução desse artigo, é nós!
