Что vuejs предлагает примеси ?

Vue имеет некоторые функции многократного использования кода для компонентов. Mixins является одним из них. Mixins не что иное, как объект javaScript, который содержит все крючки, методы и свойства жизненного цикла vuejs. Он очень прост в использовании и полезен для повторного использования и чистого кода. Почти каждая передняя или задняя часть фреймворка имеет такие функции или средства.

Зарегистрировать миксины

mixins можно зарегистрировать глобально и локально

01. Глобальная регистрация

Vue.mixin({
created:function (){
    console.log('Global mixin created hook')
},
methods:{
  foo: function ()
    {console.log('foo')
  },
....
})

Глобальные mixins применяются буквально к каждому отдельному компоненту,даже к стороннему плагину.

02. Местная регистрация

// mixins/postMixin.js
export default postMixin = {
    created: function () {
        console.log('created from mixin')
    } }
// components/post.vue
import postMixin from './mixins/postMixin'
export default {
    name: 'post',
    mixins: [postMixin],
    created: function (){
       console.log('created from component')
    }
})

Локальная регистрация эффективна только для тех компонентов, которые принимаются mixins объектом. примеси компонентов — это массив, который может принимать несколько аргументов в качестве примесей.

Что произойдет, если миксины и параметры компонентов будут одинаковыми?

Когда компонент использует миксин, все параметры в миксине будут «смешаны» с собственными параметрами компонента. Опции миксина будут вызываться перед собственной опцией компонента. поэтому параметры компонента будут иметь приоритет.

01. Свойство метода data() будет полем с данными компонента. если свойство конфликтует, то свойство компонента имеет приоритет.

// mixins/postMixin.js
export default postMixin = {
  data: function () {
    return {
      title: 'This is post title from mixin',
      body: 'This is post body from mixin'
    }
  }
}
new Vue({
  mixins: [mixin],
  data: function () {
    return {
     title: 'This is post title from component',
    }
  },
  created: function () {
    console.log(this.$data)
    // { 
    //   title: "This is post title from component", // conflicts
    //   body: "This is post body from mixin"        // marge
    // }
  }
})

02. created() вариант будет margeвместе.

// mixins/postMixin.js
export default postMixin = {
    created: function () {
        console.log('created from mixin')
    } }
// components/post.vue
import postMixin from './mixins/postMixin'
export default {
    name: 'post',
    mixins: [postMixin],
    created: function (){
       console.log('created from component')
    }
})
// -> "created from mixin"
// -> "created from component"

03. methods , components и directives будут объединены в один объект. Параметры компонента будут иметь приоритет, если в этих объектах есть конфликтующие ключи.