Visualização orientada a dados

Menos lógica significa menos bugs, o template orientado a dados é apenas dados, bem chato como alguns objetos. É bem simples, tanto que é chato, então é improvável que os bugs venham de lá.

Um conceito que gosto de seguir nos meus componentes é torná-los orientados à dados.

Em vez de escrever um modelo que se repete assim:

<template>
  <div>
    <TrickItem @click="homeMethod"> Home </TrickItem>
    <TrickItem @click="postsMethod"> Posts </TrickItem>
    <TrickItem @click="improveMethod" promote> Como ser um programador melhor </TrickItem>
  </div>
</template>

Você pode refatorar o template, para usar a configuração e direcioná-lo.

Então no template teremos algo assim:

<template>
  <div>
    <TrickItem
      v-for="item in trickItems"
      :key="item.text"
      :modal="item.modal"
      @click="item.action"
    >
      {{ item.text }}
    </TrickItem>
  </div>
</template>

E no script:

<script>
const homeMethod = () => {}
const postsMethod = () => {}
const improveMethod = () => {}

const trickItems = [
  {
    text: 'Home',
    action: homeMethod,
  },
  {
    text: 'Posts',
    action: postsMethod,
  },
  {
    text: 'Como ser um programador melhor',
    action: improveMethod,
    promote: true,
  },
]
</script>

🧐 Não temos menos código, mas temos um código mais simples:

• É mais fácil ler a configuração: ler o código no html é complicado porque você precisa descobrir o que a lógica está fazendo, mas a configuração separada é muito simples de entender.
• Menos lógica significa menos bugs: a configuração acima é apenas um array bem chato com alguns objetos. É bem simples, tanto que é chato, então é improvável que os bugs venham de lá.
• Componentes dinâmicos são mais flexíveis: como fizemos esse componente renderizar dinamicamente os diferentes itens, ganhamos uma tremenda flexibilidade com a sua reutilização.