Vue Academy · Aula

Mixins e Diretivas Personalizadas

Reutilize lógica com mixins e crie diretivas personalizadas.

Mixins e Diretivas Personalizadas é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 1 de 3. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 3 aulas no total.

Reutilizar lógica

À medida que os apps crescem, você encontra a mesma lógica em vários componentes. O Vue oferece várias maneiras de compartilhá-la. Esta lição aborda duas: a abordagem mais antiga de misturas e as poderosas diretivas personalizadas.

O que é uma mistura?

Uma mistura é um objeto com opções de componente (dados, métodos e ganchos) que é mesclado a qualquer componente que a utilize. Era a forma clássica de reutilizar lógica no Vue 2.

export const loggerMixin = {
  created() {
    console.log("Component created")
  },
  methods: {
    log(msg) { console.log(msg) }
  }
}

Usar uma mistura

Adicione uma mistura a um componente por meio do vetor mixins. Suas opções são mescladas às opções próprias do componente.

import { loggerMixin } from "./loggerMixin"

export default {
  mixins: [loggerMixin],
  created() {
    this.log("Ready")
  }
}

Desvantagens das misturas

As misturas têm problemas reais: não fica claro de onde veio uma propriedade (origem implícita), os nomes podem colidir entre misturas e as regras de mesclagem ficam confusas. Esses pontos problemáticos levaram a uma abordagem melhor.

Funções componíveis: uma abordagem melhor

No Vue 3, as funções componíveis (funções que usam a API de Composição) substituem as misturas. Elas tornam as origens explícitas, evitam conflitos de nomes e permitem uma composição limpa. Prefira-as em código novo.

import { ref } from "vue"

export function useCounter() {
  const count = ref(0)
  function increment() { count.value++ }
  return { count, increment }
}

Usar uma função componível

Chame a função componível em setup e desestruture exatamente o que precisa; a origem fica clara e explícita.

import { useCounter } from "./useCounter"

export default {
  setup() {
    const { count, increment } = useCounter()
    return { count, increment }
  }
}

O que é uma diretiva personalizada?

Uma diretiva personalizada reúne comportamentos de baixo nível do DOM que você pode anexar a elementos com v-name. Ela é ideal para manipulação direta do DOM, como foco, rolagem ou dicas de ferramenta.

Registrar uma diretiva global

Registre uma diretiva no app com app.directive. O nome é usado nos modelos com o prefixo v-.

app.directive("focus", {
  mounted(el) {
    el.focus()
  }
})

// usage: <input v-focus />

Ganchos de diretivas

As diretivas têm ganchos do ciclo de vida: mounted (elemento inserido), updated (componente atualizado), beforeUnmount (limpeza) e outros, espelhando o ciclo de vida do componente.

app.directive("color", {
  mounted(el, binding) {
    el.style.color = binding.value
  },
  updated(el, binding) {
    el.style.color = binding.value
  }
})

O objeto de vinculação

O segundo argumento do gancho é a vinculação. Ele contém value (o valor passado), arg (após dois-pontos) e modifiers (após pontos).

// <p v-color:bg.bold="theme">
// binding.value -> theme
// binding.arg -> "bg"
// binding.modifiers -> { bold: true }

Diretivas locais

Para diretivas usadas em apenas um componente, registre-as localmente com a opção directives, em vez de globalmente.

export default {
  directives: {
    focus: {
      mounted(el) { el.focus() }
    }
  }
}

Verificação rápida

Teste seus conhecimentos sobre misturas e diretivas.

Recapitulação

As misturas mesclam opções aos componentes, mas sofrem com origens implícitas e conflitos de nomes; prefira as funções componíveis no Vue 3. As diretivas personalizadas, registradas com app.directive ou localmente, reúnem comportamentos do DOM usando ganchos como mounted e um objeto de vinculação. Em seguida, você reunirá funcionalidades em uma extensão reutilizável.

Perguntas Frequentes

A aula “Mixins e Diretivas Personalizadas” é grátis?

Sim — o texto completo de “Mixins e Diretivas Personalizadas” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 3 aulas no total.

O que vou aprender em “Mixins e Diretivas Personalizadas”?

Reutilize lógica com mixins e crie diretivas personalizadas. Você pratica Vue Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Vue Academy?

Nenhuma experiência prévia é necessária. Vue Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 3.

Quanto tempo leva a aula “Mixins e Diretivas Personalizadas”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Vue Academy?

Sim. Cada aula de Vue Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para Vue Academy