Mixiny i niestandardowe dyrektywy
Ponowne wykorzystywanie logiki za pomocą mixinów oraz tworzenie niestandardowych dyrektyw.
Mixiny i niestandardowe dyrektywy to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 1 z 3. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 3 lekcji w sumie.
Ponowne używanie logiki
W miarę rozwoju aplikacji ta sama logika pojawia się w wielu komponentach. Vue oferuje kilka sposobów jej współdzielenia. Ta lekcja omawia dwa z nich: starsze podejście oparte na mixins oraz zaawansowane dyrektywy niestandardowe.
Czym jest mixin?
Mixin to obiekt zawierający opcje komponentu, takie jak dane, metody i hooki, który jest scalany z każdym komponentem korzystającym z niego. W Vue 2 był to klasyczny sposób ponownego używania logiki.
export const loggerMixin = {
created() {
console.log("Component created")
},
methods: {
log(msg) { console.log(msg) }
}
}Korzystanie z mixina
Mixin należy dodać do komponentu za pomocą tablicy mixins. Jego opcje są scalane z własnymi opcjami komponentu.
import { loggerMixin } from "./loggerMixin"
export default {
mixins: [loggerMixin],
created() {
this.log("Ready")
}
}Wady mixinów
Mixiny mają istotne wady: nie jest jasne, skąd pochodzi dana właściwość, czyli jej źródło jest niejawne, nazwy mogą kolidować między mixinami, a reguły scalania stają się niejasne. Te problemy doprowadziły do powstania lepszego podejścia.
Composables: lepsze podejście
W Vue 3 composables, czyli funkcje korzystające z Composition API, zastępują mixiny. Ułatwiają jawne określanie źródeł, zapobiegają konfliktom nazw i pozwalają na przejrzyste łączenie logiki. W nowym kodzie należy preferować właśnie je.
import { ref } from "vue"
export function useCounter() {
const count = ref(0)
function increment() { count.value++ }
return { count, increment }
}Korzystanie z composable
Composable należy wywołać w setup i pobrać dokładnie potrzebne elementy za pomocą destrukturyzacji; źródło logiki jest wtedy oczywiste i jawne.
import { useCounter } from "./useCounter"
export default {
setup() {
const { count, increment } = useCounter()
return { count, increment }
}
}Czym jest dyrektywa niestandardowa?
Dyrektywa niestandardowa opakowuje niskopoziomowe zachowanie DOM, które można dołączać do elementów za pomocą v-name. Jest idealna do bezpośredniej manipulacji DOM, na przykład ustawiania fokusu, przewijania lub wyświetlania podpowiedzi.
Rejestrowanie dyrektywy globalnej
Dyrektywę należy zarejestrować w aplikacji za pomocą app.directive. Jej nazwa jest używana w szablonach z prefiksem v-.
app.directive("focus", {
mounted(el) {
el.focus()
}
})
// usage: <input v-focus />Hooki dyrektyw
Dyrektywy mają hooki cyklu życia: mounted, gdy element zostanie wstawiony, updated, gdy komponent zostanie zaktualizowany, beforeUnmount, służący do sprzątania, oraz inne, odzwierciedlające cykl życia komponentu.
app.directive("color", {
mounted(el, binding) {
el.style.color = binding.value
},
updated(el, binding) {
el.style.color = binding.value
}
})Obiekt wiązania
Drugim argumentem hooka jest wiązanie. Zawiera ono value, czyli przekazaną wartość, arg, znajdujący się po dwukropku, oraz modifiers, znajdujące się po kropkach.
// <p v-color:bg.bold="theme">
// binding.value -> theme
// binding.arg -> "bg"
// binding.modifiers -> { bold: true }Dyrektywy lokalne
W przypadku dyrektyw używanych tylko w jednym komponencie należy rejestrować je lokalnie za pomocą opcji directives, a nie globalnie.
export default {
directives: {
focus: {
mounted(el) { el.focus() }
}
}
}Szybki test
Sprawdź swoją wiedzę na temat mixinów i dyrektyw.
Podsumowanie
Mixiny scalają opcje z komponentami, ale mają problemy z niejawnymi źródłami i konfliktami nazw; w Vue 3 należy preferować composables. Dyrektywy niestandardowe, rejestrowane za pomocą app.directive lub lokalnie, opakowują zachowanie DOM, korzystając z hooków takich jak mounted i obiektu binding. W następnym kroku opakują Państwo funkcjonalność w postaci wielokrotnego użytku pluginu.
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 42
- Lekcje
- 156
Często zadawane pytania
Czy lekcja „Mixiny i niestandardowe dyrektywy” jest bezpłatna?
Tak — pełny tekst „Mixiny i niestandardowe dyrektywy” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 3 lekcji w sumie.
Co nauczysz się w „Mixiny i niestandardowe dyrektywy”?
Ponowne wykorzystywanie logiki za pomocą mixinów oraz tworzenie niestandardowych dyrektyw. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Vue Academy?
Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 3.
Ile czasu zajmuje lekcja „Mixiny i niestandardowe dyrektywy”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?
Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Mixiny i niestandardowe dyrektywy
- Tworzenie pluginów
- Skalowalna struktura folderów