Что такое VueJS? Каковы основные особенности VueJS? 6

58. Что такое глобальные миксины?

Иногда возникает необходимость расширить функциональность Vue или применить опцию ко всем компонентам Vue, доступным в нашем приложении. В этом случае миксины могут применяться глобально, чтобы влиять на все компоненты во Vue. Эти миксины называются глобальными миксинами.
Возьмем пример глобального миксина,
Vue.mixin({
created(){
console.log("Write global mixins")
}
})

new Vue({

el: '#app'
})
В приведенном выше глобальном миксине параметры миксина распределяются по всем компонентам с запущенной консолью во время создания экземпляра. Они полезны во время тестирования, отладки или сторонних библиотек. В то же время вам нужно использовать эти глобальные миксины редко и осторожно, потому что они влияют на каждый созданный экземпляр Vue, включая сторонние компоненты.

59. Как вы используете миксины в CLI?

Используя Vue CLI, миксины можно указывать в любом месте папки проекта, но предпочтительно в / src / mixins для облегчения доступа. После того, как эти миксины созданы в файле .js и представлены с ключевым словом export, их можно импортировать в любой компонент с ключевым словом import и путями к файлам.

60. Какие стратегии слияния используются в миксинах?

Когда миксин и сам компонент содержат перекрывающиеся параметры, параметры будут объединены на основе некоторых стратегий.
i. Объекты данных подвергаются рекурсивному слиянию, при этом данные компонента имеют приоритет над миксинами в случаях перекрытия или конфликтов.
var mixin = {
data: function () {
return {
message: 'Hello, this is a Mixin'
}
}
}
new Vue({
mixins: [mixin],
data: function () {
return {
message: 'Hello, this is a Component'
}
},
created: function () {
console.log(this.$data); // => { message: "Hello, this is a Component'" }
}
})

ii. Перекрывающиеся функции Hook объединены в массив, так что все они будут вызваны. Перехватчики Mixin будут вызываться перед собственными перехватчиками компонента.

const myMixin = {
created(){
console.log("Вызывается из Mixin")
}
}

new Vue({

el: '#root',
mixins: [myMixin],
created(){
console.log("Вызывается из компонента")
}
})

//Вызывается из Mixin

// Вызывается из компонента

iii. Параметры, которые ожидают значения объекта (такие как методы, компоненты и директивы), будут объединены в один и тот же объект. В этом случае параметры компонента будут иметь приоритет, если в этих объектах есть конфликтующие ключи.

var mixin = {
methods: {
firstName: function () {
console.log('John')
},
contact: function () {
console.log('[phone]')
}
}
}

var vm = new Vue({

mixins: [mixin],
methods: {
lastName: function () {
console.log('Murray')
},
contact: function () {
console.log('[phone]')
}
}
})

vm.firstName() // "John"

vm.lastName() // "Murray"
vm.contact() // "[phone]"