Миксины и пользовательские директивы
Повторно используйте логику с помощью миксинов и создавайте пользовательские директивы
«Миксины и пользовательские директивы» — бесплатный урок Vue Academy на CoddyKit. Это урок 1 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 3 уроков всего.
Повторное использование логики
По мере роста приложений вы обнаруживаете одну и ту же логику во многих компонентах. Vue предлагает несколько способов поделиться ею. В этом уроке рассматриваются два из них: устаревший подход с миксинами и мощные пользовательские директивы.
Что такое миксин
Миксин — это объект с настройками компонента (данными, методами и хуками), который объединяется с любым компонентом, использующим его. В Vue 2 это был классический способ повторного использования логики.
export const loggerMixin = {
created() {
console.log("Component created")
},
methods: {
log(msg) { console.log(msg) }
}
}Использование миксина
Добавьте миксин в компонент через массив mixins. Его настройки объединяются с собственными настройками компонента.
import { loggerMixin } from "./loggerMixin"
export default {
mixins: [loggerMixin],
created() {
this.log("Ready")
}
}Недостатки миксинов
У миксинов есть серьёзные проблемы: непонятно, откуда взялось свойство (неявный источник), имена в разных миксинах могут конфликтовать, а правила объединения становятся запутанными. Эти недостатки привели к появлению более удачного подхода.
Композаблы: лучший подход
В Vue 3 композаблы (функции, использующие API композиции) заменяют миксины. Они делают источники явными, предотвращают конфликты имён и аккуратно объединяются. Для нового кода предпочитайте их.
import { ref } from "vue"
export function useCounter() {
const count = ref(0)
function increment() { count.value++ }
return { count, increment }
}Использование композабла
Вызовите композабл в setup и извлеките из результата только нужные значения; источник будет очевидным и явным.
import { useCounter } from "./useCounter"
export default {
setup() {
const { count, increment } = useCounter()
return { count, increment }
}
}Что такое пользовательская директива
Пользовательская директива объединяет низкоуровневое поведение DOM, которое можно привязать к элементам с помощью v-name. Она идеально подходит для непосредственного управления DOM, например для фокусировки, прокрутки или всплывающих подсказок.
Регистрация глобальной директивы
Зарегистрируйте директиву в приложении с помощью app.directive. Имя используется в шаблонах с префиксом v-.
app.directive("focus", {
mounted(el) {
el.focus()
}
})
// usage: <input v-focus />Хуки директив
У директив есть хуки жизненного цикла: mounted (элемент вставлен), updated (компонент обновлён), beforeUnmount (очистка) и другие, отражающие жизненный цикл компонента.
app.directive("color", {
mounted(el, binding) {
el.style.color = binding.value
},
updated(el, binding) {
el.style.color = binding.value
}
})Объект привязки
Второй аргумент хука — это привязка. Он содержит value (переданное значение), arg (значение после двоеточия) и modifiers (значения после точек).
// <p v-color:bg.bold="theme">
// binding.value -> theme
// binding.arg -> "bg"
// binding.modifiers -> { bold: true }Локальные директивы
Для директив, используемых только в одном компоненте, зарегистрируйте их локально с помощью параметра directives, а не глобально.
export default {
directives: {
focus: {
mounted(el) { el.focus() }
}
}
}Быстрая проверка
Проверьте свои знания о миксинах и директивах.
Итоги
Миксины объединяют настройки с компонентами, но страдают от неявных источников и конфликтов имён; в Vue 3 предпочитайте композаблы. Пользовательские директивы, зарегистрированные с помощью app.directive или локально, объединяют поведение DOM, используя такие хуки, как mounted, и объект binding. Далее вы объедините функциональность в переиспользуемый плагин.
Изучай HTML с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 42
- Уроки
- 156
Часто задаваемые вопросы
Урок «Миксины и пользовательские директивы» бесплатный?
Да — полный текст урока «Миксины и пользовательские директивы» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 3 уроков всего.
Чему я научусь в уроке «Миксины и пользовательские директивы»?
Повторно используйте логику с помощью миксинов и создавайте пользовательские директивы Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Vue Academy?
Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 3.
Сколько времени занимает урок «Миксины и пользовательские директивы»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Vue Academy?
Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Миксины и пользовательские директивы
- Разработка плагинов
- Масштабируемая структура папок