Vue Academy · Lezione

Mixin e direttive personalizzate

Riutilizzi la logica con i mixin e crei direttive personalizzate.

Mixin e direttive personalizzate è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 1 di 3. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 3 lezioni in totale.

Riutilizzare la logica

Con la crescita delle app, la stessa logica compare in molti componenti. Vue offre diversi modi per condividerla. Questa lezione ne tratta due: l'approccio più datato dei mixin e le potenti direttive personalizzate.

Che cos'è un mixin?

Un mixin è un oggetto con opzioni del componente (dati, metodi e hook) che viene unito a qualsiasi componente lo utilizzi. In Vue 2 era il metodo classico per riutilizzare la logica.

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

Utilizzare un mixin

Aggiunga un mixin a un componente tramite l'array mixins. Le sue opzioni vengono unite a quelle del componente.

import { loggerMixin } from "./loggerMixin"

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

Svantaggi dei mixin

I mixin presentano problemi concreti: non è chiaro da dove provenga una proprietà (la fonte è implicita), i nomi possono entrare in conflitto tra i mixin e le regole di fusione diventano complesse. Queste difficoltà hanno portato a un approccio migliore.

Composables: il modo migliore

In Vue 3, i composables (funzioni che utilizzano la Composition API) sostituiscono i mixin. Rendono esplicite le fonti, evitano i conflitti tra nomi e si combinano in modo ordinato. Li preferisca per il nuovo codice.

import { ref } from "vue"

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

Utilizzare un composable

Chiami il composable in setup ed esegua il destructuring esattamente di ciò che Le serve; la fonte sarà chiara ed esplicita.

import { useCounter } from "./useCounter"

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

Che cos'è una direttiva personalizzata?

Una direttiva personalizzata racchiude comportamenti DOM di basso livello che può applicare agli elementi con v-name. È ideale per la manipolazione diretta del DOM, ad esempio per la messa a fuoco, lo scorrimento o i tooltip.

Registrare una direttiva globale

Registri una direttiva nell'app con app.directive. Il nome viene utilizzato nei template con il prefisso v-.

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

// usage: <input v-focus />

Hook delle direttive

Le direttive dispongono di hook del ciclo di vita: mounted (elemento inserito), updated (componente aggiornato), beforeUnmount (pulizia) e altri, che rispecchiano il ciclo di vita dei componenti.

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

L'oggetto binding

Il secondo argomento dell'hook è il binding. Contiene value (il valore passato), arg (dopo i due punti) e modifiers (dopo i punti).

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

Direttive locali

Per le direttive utilizzate in un solo componente, le registri localmente con l'opzione directives anziché globalmente.

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

Verifica rapida

Metta alla prova le Sue conoscenze di mixin e direttive.

Riepilogo

I mixin uniscono le opzioni ai componenti, ma soffrono di fonti implicite e conflitti tra nomi; in Vue 3 preferisca i composables. Le direttive personalizzate, registrate con app.directive o localmente, racchiudono comportamenti DOM utilizzando hook come mounted e un oggetto binding. Ora racchiuderà le funzionalità in un plugin riutilizzabile.

Domande Frequenti

La lezione «Mixin e direttive personalizzate» è gratuita?

Sì — il testo completo di «Mixin e direttive personalizzate» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 3 lezioni in totale.

Cosa imparerò in «Mixin e direttive personalizzate»?

Riutilizzi la logica con i mixin e crei direttive personalizzate. Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Vue Academy?

Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 3.

Quanto tempo richiede la lezione «Mixin e direttive personalizzate»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Vue Academy?

Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Vue Academy