Слияние опций

Если примесь и компонент содержат пересекающиеся опции, они будут определённым образом объединены.

Например, объект data претерпевает рекурсивное слияние с объектом data компонента, который имеет приоритет в случаях конфликтов.

const 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" }
  }
})

Функции хуков с одинаковыми именами объединяются в массив, чтобы все они вызывались. Хуки примеси будут вызываться перед собственными хуками компонента.

const mixin = {
  created: function () {
    console.log('вызван хук примеси')
  }
}

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

// => "вызван хук примеси"
// => "вызван хук компонента"

Опции, ожидающие значения в форме объектов, такие как methods, components и directives будут объединены. В случае конфликта, приоритет имеют опции компонента:

const mixin = {
  methods: {
    foo: function () {
      console.log('foo')
    },
    conflicting: function () {
      console.log('из примеси')
    }
  }
}

const vm = new Vue({
  mixins: [mixin],
  methods: {
    bar: function () {
      console.log('bar')
    },
    conflicting: function () {
      console.log('из самого компонента')
    }
  }
})

vm.foo() // => "foo"
vm.bar() // => "bar"
vm.conflicting() // => "из самого компонента"

Обратите внимание, что те же самые стратегии слияния используются и во Vue.extend().