## 基礎 混入 (mixins) 是一種分發 Vue 組件中可復用功能的非常靈活的方式。混入對象可以包含任意組件選項。當組件使用混入對象時，所有混入對象的選項將被混入該組件本身的選項。 例子： ``` js // 定義一個混入對象 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!" ``` ## 選項合并 當組件和混入對象含有同名選項時，這些選項將以恰當的方式混合。 比如，數據對象在內部會進行淺合并 (一層屬性深度)，在和組件的數據發生沖突時以組件數據優先。 ``` js 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" } } }) ``` 同名鉤子函數將混合為一個數組，因此都將被調用。另外，混入對象的鉤子將在組件自身鉤子**之前**調用。 ``` js var mixin = { created: function () { console.log('混入對象的鉤子被調用') } } new Vue({ mixins: [mixin], created: function () { console.log('組件鉤子被調用') } }) // => "混入對象的鉤子被調用" // => "組件鉤子被調用" ``` 值為對象的選項，例如 `methods`, `components` 和 `directives`，將被混合為同一個對象。兩個對象鍵名沖突時，取組件對象的鍵值對。 ``` js 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()` 也使用同樣的策略進行合并。 ## 全局混入 也可以全局注冊混入對象。注意使用！ 一旦使用全局混入對象，將會影響到 **所有** 之后創建的 Vue 實例。使用恰當時，可以為自定義對象注入處理邏輯。 ``` js // 為自定義的選項 'myOption' 注入一個處理器。 Vue.mixin({ created: function () { var myOption = this.$options.myOption if (myOption) { console.log(myOption) } } }) new Vue({ myOption: 'hello!' }) // => "hello!" ``` <p class="tip">謹慎使用全局混入對象，因為會影響到每個單獨創建的 Vue 實例 (包括第三方模板)。大多數情況下，只應當應用于自定義選項，就像上面示例一樣。也可以將其用作 [Plugins](plugins.html) 以避免產生重復應用</p> ## 自定義選項合并策略 自定義選項將使用默認策略，即簡單地覆蓋已有值。如果想讓自定義選項以自定義邏輯合并，可以向 `Vue.config.optionMergeStrategies` 添加一個函數： ``` js Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) { // return mergedVal } ``` 對于大多數對象選項，可以使用 `methods` 的合并策略： ``` js var strategies = Vue.config.optionMergeStrategies strategies.myOption = strategies.methods ``` 更多高級的例子可以在 [Vuex](https://github.com/vuejs/vuex) 的 1.x 混入策略里找到： ``` js const merge = Vue.config.optionMergeStrategies.computed Vue.config.optionMergeStrategies.vuex = function (toVal, fromVal) { if (!toVal) return fromVal if (!fromVal) return toVal return { getters: merge(toVal.getters, fromVal.getters), state: merge(toVal.state, fromVal.state), actions: merge(toVal.actions, fromVal.actions) } } ```