混合

基礎(chǔ)

混合以一種靈活的方式為組件提供分布復(fù)用功能。混合對象可以包含任意的組件選項。當(dāng)組件使用了混合對象時，混合對象的所有選項將被“混入”組件自己的選項中。

示例：

// 定義一個混合對象
var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}

// 定義一個組件，使用這個混合對象
var Component = Vue.extend({
  mixins: [myMixin]
})

var component = new Component() // -> "hello from mixin!"

選項合并

當(dāng)混合對象與組件包含同名選項時，這些選項將以適當(dāng)?shù)牟呗院喜?。例如，同名鉤子函數(shù)被并入一個數(shù)組，因而都會被調(diào)用。另外，混合的鉤子將在組件自己的鉤子之前調(diào)用。

var mixin = {
  created: function () {
    console.log('mixin hook called')
  }
}

new Vue({
  mixins: [mixin],
  created: function () {
    console.log('component hook called')
  }
})

// -> "mixin hook called"
// -> "component hook called"

值為對象的選項，如 methods, components 和 directives 將合并到同一個對象內(nèi)。如果鍵沖突則組件的選項優(yōu)先。

var mixin = {
  methods: {
    foo: function () {
      console.log('foo')
    },
    conflicting: function () {
      console.log('from mixin')
    }
  }
}

var vm = new Vue({
  mixins: [mixin],
  methods: {
    bar: function () {
      console.log('bar')
    },
    conflicting: function () {
      console.log('from self')
    }
  }
})

vm.foo() // -> "foo"
vm.bar() // -> "bar"
vm.conflicting() // -> "from self"

注意 Vue.extend() 使用同樣的合并策略。

全局混合

也可以全局注冊混合。小心使用！一旦全局注冊混合，它會影響所有之后創(chuàng)建的 Vue 實例。如果使用恰當(dāng)，可以為自定義選項注入處理邏輯：

// 為 `myOption` 自定義選項注入一個處理器
Vue.mixin({
  created: function () {
    var myOption = this.$options.myOption
    if (myOption) {
      console.log(myOption)
    }
  }
})

new Vue({
  myOption: 'hello!'
})
// -> "hello!"

自定義選項合并策略

在合并自定義選項時，默認(rèn)的合并策略是簡單地覆蓋已有值。如果想用自定義邏輯合并自定義選項，則向 Vue.config.optionMergeStrategies 添加一個函數(shù)：

Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) {
  // 返回 mergedVal
}

對于多數(shù)值為對象的選項，可以簡單地使用 methods 所用的合并策略:

var strategies = Vue.config.optionMergeStrategies
strategies.myOption = strategies.methods