Melhoria da aplicação Vue.js. Algumas dicas práticas

 

   (( item.name ))
 

...e veremos um erro como este :

Podemos lidar com isso utilizando JSX e um componente funcionalTambém devemos passar um booleano e ele substituirá o v-if.

Não escreva manipuladores de chamadas de API em componentes

Na verdade, este é apenas um dos exemplos do que não se deve fazer nos componentes. Faça apenas o que é necessário localmente na lógica dos componentes. Todos os métodos que possam ser externos devem ser separados e apenas chamados nos componentes, por exemplo, na lógica empresarial.

Exemplo:

Em vez de um método como este:

created() (
this.fetchArticles();
),
métodos: (
 async fetchArticles() (
  try (
    const data = await axios.get(url);
    this.articles = data.articles;
    ) catch (e) (
    // tratar erro
    )
  )
)

Escreva algo deste género - basta chamar o método adequado que devolverá os resultados da API:

 async fetchArticles() (
   try (
     this.articles = await ArticlesService.fetchAll();
   ) catch (e) (
     // tratar erro
   )
  )

Utilizar ranhuras em vez de grandes quantidades de adereços

Às vezes, usar props é suficiente, mas também há casos em que elas não são eficientes. Isso pode acontecer em situações em que teríamos de adicionar demasiadas props para fazer o componente funcionar como queremos. O exemplo mais simples poderia ser um componente de botão. Sem dúvida, é um componente que pode ser utilizado em qualquer parte de uma aplicação. Então, vamos considerar um componente de botão como este.

(( texto ))

Nesta fase, trata-se de um componente simples que aceita apenas objectos de texto. Está bem, mas pode não ser suficiente porque vamos precisar de ícones no botão. Neste caso, temos de adicionar mais 2 props (2, porque queremos ter a opção de adicionar antes ou depois do texto). Assim, o componente terá o seguinte aspeto:

(( texto ))

Não é mau, só temos 3 adereços, mas...

E se precisarmos de um indicador de carga? Bem, teríamos de acrescentar outra prop. E isto para cada nova funcionalidade! Acompanhar o crescimento do número de componentes parece-lhe agora um desafio? Sim, parece, sem dúvida!

Em vez disso, utilizemos as ranhuras.

Mais simples, certo? Ok, mas como é que podemos obter a funcionalidade de adicionar ícone? É muito fácil! Basta utilizar o componente desta forma:

Voltar

Seguinte

Maneira fácil de melhorar o desempenho

Vou partilhar consigo algumas dicas que são realmente fáceis de implementar, para que possa beneficiar imediatamente.

Rotas de carregamento lento

Por vezes, as rotas estão disponíveis apenas para administradores ou utilizadores com acesso específico, podendo também ser menos visitadas do que outras. Estes são casos perfeitos para utilizar a rota de carregamento lento.

Basta utilizar a função de seta na propriedade do seu componente para devolver a função de importação:

 export default new VueRouter (
   (
     modo: 'histórico',
     routes: [
       (
         caminho: '/landing',
         componente: () => import('../pages/p-welcome'),
         nome: 'welcome'
       ),
  ...

Em vez de:

importar PWelcome de '@/pages/p-welcome';

export default new VueRouter (
(
mode: 'history',
routes: [
(
caminho: '/landing',
component: PWelcome, //apenas importou o componente
nome: 'welcome'
),

Componentes do Vue com carregamento lento

Uma situação semelhante pode ocorrer com Componentes do Vue. Podemos importar preguiçosamente componentes de um único ficheiro como este:

const lazyComponent = () => import('pathToComponent.vue')
exportar por defeito (
components: (lazyComponent )
)

// Outra sintaxe
export default (
componentes: (
lazyComponent: () => import('pathToComponent.vue')
)
)

Graças ao lazy load desse componente, ele será descarregado apenas quando solicitado. Por exemplo, se tivermos um componente com v-if, ele só será solicitado se o componente for renderizado. Portanto, a menos que o valor v-if seja verdadeiro, o componente não será carregado. É por isso que a importação preguiçosa também pode ser usada para JavaScript ficheiros.

Bónus: Ao usar o Vue CLI 3+, todos os recursos carregados preguiçosamente são pré-processados por padrão!

Utilizar invólucros transparentes em vez de adereços de atributos

Considere um componente como este:

Sem qualquer problema, podemos utilizá-lo assim:

ou

Funciona, porque Vue permite-lhe passar atributos html para o componente, mesmo que não os tenha declarado como props. Os atributos html são aplicados ao elemento raiz do componente (input, neste caso).

O problema surge quando queremos expandir o nosso componente de entrada, uma vez que este pode ter o seguinte aspeto:

<code> <template>
   <div class="form-group">
     <label :for="id">(( rótulo ))</label>
     <input
       :id="id"
       :value="value"
       class="base-input"
       @input="$emit('input', $event.target.value)"
     >
   </div>
 </template>

Agora, utilizando o componente desta forma:

não vai funcionar como queremos, porque o tipo e o placeholder serão aplicados ao div (elemento raiz) e isso não faz sentido. Por isso, temos de lidar com isso, porque queremos adicionar os nossos atributos ao elemento input. O teu primeiro pensamento pode ser "vamos adicionar as props de que precisamos!" e claro que isso vai funcionar, mas... e se quisermos usar tipo, autocompletar, marcador de posição, focagem automática, desativado, modo de entrada, etc., então temos de definir as props para cada atributo html. Pessoalmente, não gosto deste método moroso, por isso vamos procurar algo melhor!

Podemos tratar de todo o problema em apenas duas linhas.

<template>
  <div class="form-group">
    <label :for="id">(( rótulo ))</label>
    <!-- pay attention to v-bind="$attrs" -->
    <input
      :id="id"
      v-bind="$attrs"
      :value="value"
      class="base-input"
      @input="$emit('input', $event.target.value)"
    >
  </div>
</template>

<script>
export default (
  name: 'BaseInput',
  inheritAttrs: false, // <- pay attention to this line
  props: ['value', 'label', 'id']
);
</script>

Podemos utilizar v-bind="$attrs" e passar atributos diretamente para sem declarar grandes quantidades de props. Além disso, lembre-se de adicionar a opção inheritAttrs: false para desativar a passagem dos atributos para o elemento raiz. Vamos um pouco mais longe: e se precisarmos de adicionar ouvintes de eventos a este input? Novamente, isso poderia ser tratado por props ou eventos personalizados, mas há uma solução melhor.

<template>
  <div class="form-group">
    <label :for="id">(( rótulo ))</label>
    <!-- pay attention to v-on="listeners" -->
    <input
      :id="id"
      v-bind="$attrs"
      :value="value"
      class="base-input"
      v-on="listeners"
    >
</div>
</template>

<script>
export default (
  name: 'BaseInput',
  inheritAttrs: false,
  props: ['value', 'label', 'id'],
  computed: (
    listeners() (
      return (
        ...this.$listeners,
        input: event => this.$emit('input', event.target.value)
      );
    )
  )
);
</script>

Existe uma nova propriedade computada que devolve o componente para os ouvintes e adiciona o ouvinte de entrada. Utilizamos esse input computado escrevendo simplesmente v-on="ouvintes".

Utilizar o watcher com a opção immediate em vez do hook criado e do watcher em conjunto

É frequente irmos buscar alguns dados a um hook criado (ou montado), mas depois precisamos de ir buscar esses dados a cada alteração de uma propriedade, por exemplo, a página atual da paginação. Alguns tendem a escrevê-lo assim:

É claro que funciona, mas... Não é a melhor abordagem, nem mesmo uma boa abordagem. Então, vamos ver como podemos refatorar isso, um exemplo de uma abordagem não tão ruim:

A versão acima é melhor porque não é necessário outro método, apenas nomeámos um método que deve ser chamado para alterar watchedProperty.

Uma abordagem ainda melhor:

Livrámo-nos do gancho created. Ao adicionar a opção 'immediate', fazemos com que esse componente chame o método fetchData imediatamente após o início da observação (um pouco antes do gancho created e depois de beforeCreated), para que possa ser usado em vez do gancho created.

Resumo das sugestões Vue.js

Estas dicas não farão com que a sua candidatura seja perfeita, mas a sua utilização fará com que rapidamente melhorar a qualidade do seu código. Além disso, espero que encontrem algo de interessante nos exemplos acima referidos.

Note-se que alguns deles foram simplificados para efeitos do artigo.

Ler mais:

JavaScript está completamente morto. Um gajo qualquer na Internet

Um olhar mais profundo sobre os ganchos React mais populares

Projectos de software onde se pode utilizar o JavaScript