Найти в Дзене
Сергей Бреславец
21 подписчик

Vue.js Миксины

220
1 мин
Миксины (mixins) или примеси позволяет вам использовать повторно код в компонентах vue. При их использовании все что было написано в миксине объединяется с вашим компонентом или подмешиваются, поэтому их называют примеси. Миксин по сути может иметь все что имеет и обычный компонент за исключение темплейта Как происходит слияние если у миксина и компоненты были одинаковые свойства до приоритет отдается свойствам компоненты var mixin = { data: function () { return { message: 'hello', foo: 'abc' } } } new Vue({ mixins: [mixin], data: function () { return { message: 'goodbye', bar: 'def' } }, created: function () { console.log(this.$data) // => { message: "goodbye", foo: "abc", bar: "def" } }}) как подмешиваются методы и хуки var mixin = { created: function () { console.log('вызван хук примеси') } } new Vue({ mixins: [mixin], created: function () { console.log('вызван хук компо
Оглавление

Миксины (mixins) или примеси позволяет вам использовать повторно код в компонентах vue. При их использовании все что было написано в миксине объединяется с вашим компонентом или подмешиваются, поэтому их называют примеси.

Миксин по сути может иметь все что имеет и обычный компонент за исключение темплейта

Как происходит слияние

если у миксина и компоненты были одинаковые свойства до приоритет отдается свойствам компоненты

var mixin = {
data: function () {
return {
message: 'hello',
foo: 'abc'
}
} }
new Vue({
mixins: [mixin],
data: function () {
return {
message: 'goodbye',
bar: 'def'
} },
created: function () {
console.log(this.$data) // => { message: "goodbye", foo: "abc", bar: "def" } }})

как подмешиваются методы и хуки

var mixin = {
created: function () {
console.log('вызван хук примеси')
} }
new Vue({
mixins: [mixin],
created: function () { console.log('вызван хук компонента') } })

на выходе будет

вызван хук примеси .

вызван хук компонента

если будет конфликтный метод то будет вызван метод компонента

Плюсы

  1. появляется возможность не дублировать код
  2. появляется возможность как то разделить большой код на маленькие блоки (лучше так не делать читабельность снижается и сразу не поймешь откуда код вызывается )

Минусы

В миксинах не всегда понятно, что они требует например, вы описали внутри функции, которая требует наличие определенного поля и метода в компоненте, на этапе компиляции вы никак об этом не узнаете, но делать так система позволяет так как по сути миксин становится частью вашего компонента, поэтому тут стоит быть очень осторожным.

Где можно применить

Есть такие ситуации например у вас page и вам нужно выставить мета данные, наверно такую логику можно вынести в миксин или просто подключить, новый компонент в котором будет, такая логика, с одной стороны читабельность кода увеличиться с другой лишний компонент, а миксин решит такую проблему.

Еще как вариант безопасного использование в миксины можно загнать методы преобразователи, или просто хелперы, которые просто получают и отдают вам данные например преобразование дат или тому подобное.

Подробнее https://ru.vuejs.org/v2/guide/mixins.html