Aqui está uma tradução gratuita do artigo " 10 dicas e truques para torná-lo um desenvolvedor VueJS melhor " de Dev.to. O autor nos falará sobre opções interessantes e úteis para o uso das ferramentas comuns do VueJS.
1. Introdução
Gosto muito de trabalhar com o VueJS e toda vez que faço isso, mergulho mais fundo em seus recursos e capacidades. Neste artigo, apresento a você 10 dicas e truques interessantes que você provavelmente não conhecia e tentarei ajudá-lo a se tornar o melhor desenvolvedor do VueJS.
Vamos deixar a sintaxe dos slots bonita
Com o lançamento do Vue 2.6, as abreviações de slots tornaram-se disponíveis, que podem ser usadas como eventos (por exemplo, a abreviação @click para v-on:click ) ou dois pontos para ligação de dados ( :src ). Se você possui, por exemplo, um componente de tabela, pode usar o seguinte recurso :
<template> ... <my-table> <template #row="{ item }"> /* some content here. You can freely use 'item' here */ </template> </my-table> ... </template>
$ on ('gancho:')
Esse é um recurso interessante que você pode usar se precisar definir um ouvinte de evento personalizado ou um plug-in de terceiros nos ganchos created ou mounted e removê-lo no gancho beforeDestroy para evitar vazamentos de memória. Usando $on('hook:') você pode definir ou remover um evento em apenas um hook.
mounted() { const aThirdPartyPlugin = aThirdPartyPlugin() this.$on('hook:beforeDestroy', () => { aThirdPartyPlugin.destroy() }) }
Adereços de validação
Talvez você já saiba que é possível validar seus adereços com valores primitivos, como String , Number ou Object . Mas você também pode criar um validador personalizado, por exemplo, para verificar uma matriz de strings:
alertType: { validator: value => ['signup', 'login', 'logout'].includes(value) }
Argumentos de diretiva dinâmica
Um dos recursos mais interessantes do VueJS 2.6 é a capacidade de determinar dinamicamente os argumentos da diretiva de componentes. Suponha que você tenha um componente de botão e deseje ouvir o evento Click sob certas condições e o evento DoubleClick em todos os outros casos. Aqui está um caso em que essa diretiva pode ser útil:
<template> ... <aButton @[someEvent]="handleSomeEvent()"/> ... </template> <script> ... data(){ return{ ... someEvent: someCondition ? "click" : "dblclick" } }, methods:{ handleSomeEvent(){ // handle some event } } ... </script>
E o que é realmente legal -> é que você pode aplicar esse modelo a atributos HTML dinâmicos, adereços e muito mais!
Reutilizando componentes para rotas semelhantes
Às vezes, você tem rotas diferentes que usam algum conjunto de componentes. Se você alternar entre essas rotas, por padrão, o componente comum não será redesenhado, porque o Vue reutilizará esse componente para obter melhor desempenho. Mas se você deseja redesenhar esses componentes, você pode definir a propriedade :key no Router-View-Component :
<template> <router-view :key="$route.fullPath"></router-view> </template>
Passe todos os adereços do componente pai para o filho
Esse é um recurso muito interessante para transmitir todos os objetos do componente pai para o componente filho. Este método é conveniente se, por exemplo, você usar o componente wrapper. Assim, em vez de passar todas as propriedades em sequência, você só precisa passar todas de uma vez:
<template> <childComponent v-bind="$props"/> </template>
Em vez disso:
<template> <childComponent :prop1="prop1" :prop2="prop2" :prop3="prop3" :prop4="prop4" ... /> </template>
Passar todos os ouvintes de evento do componente pai para o filho
Se você tiver um componente filho que não é raiz para o componente pai, poderá passar todos os ouvintes de evento de pai para filho desta maneira:
<template> <div> ... <childComponent v-on="$listeners"/> ... </div> </template>
Se o componente filho estiver na raiz do pai, você não precisará desse truque e todos os eventos estarão disponíveis por padrão.
$ createElement
Cada instância do Vue tem acesso por padrão ao $createElement , que cria e retorna nós virtuais. Isso pode ser usado, por exemplo, para usar a marcação em métodos que podem ser passados para a diretiva v-html . Nos componentes funcionais, esse método está disponível como o primeiro argumento para a função render .
Usando JSX
A partir do Vue CLI 3 , o suporte a JSX apareceu por padrão. Agora você pode escrever seu código usando JSX (por exemplo, se estiver mais confortável após a reação), também pode ser mais conveniente, por exemplo, para escrever componentes funcionais. Se você ainda não estiver usando o Vue CLI 3 , poderá usar o babel-plugin-transform-vue-jsx para oferecer suporte ao JSX em seu projeto.
Modelo v personalizado
Por padrão, v-model é o que chamamos de açúcar sintático em @input e :value . Mas você pode especificar a propriedade do model no seu componente Vue e determinar qual evento e acessórios serão usados:
export default: { model: { event: 'change', prop: 'checked' } }
Conclusão
Espero ter podido lhe dar algumas dicas para ajudá-lo a se tornar o melhor desenvolvedor do VueJS.