Visualização orientada a dados

Visualização 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.