VUE的mixin混入解析

一、基礎

　　常用場景：有兩個非常相似的組件，他們的基本功能是一樣的，但他們之間又存在着足夠的差異性，此時的你就像是來到了一個分岔路口：我是把它拆分成兩個不同的組件呢？還是保留為一個組件，然后通過props傳值來創造差異性從而進行區分呢？

      兩種解決方案都不夠完美：如果拆分成兩個組件，你就不得不冒着一旦功能變動就要在兩個文件中更新代碼的風險，這違背了 DRY 原則。反之，太多的props傳值會很快變得混亂不堪，從而迫使維護者（即便這個人是你）在使用組件的時候必須理解一大段的上下文，拖慢寫碼速度。

      使用Mixin。Vue 中的Mixin對編寫函數式風格的代碼很有用，因為函數式編程就是通過減少移動的部分讓代碼更好理解（引自 Michael Feathers ）。Mixin允許你封裝一塊在應用的其他組件中都可以使用的函數。如果使用姿勢得當，他們不會改變函數作用域外部的任何東西，因此哪怕執行多次，只要是同樣的輸入你總是能得到一樣的值，真的很強大！

　　混入 (mixin) 提供了一種非常靈活的方式，來分發 Vue 組件中的可復用功能。一個混入對象可以包含任意組件選項。當組件使用混入對象時，所有混入對象的選項將被“混合”進入該組件本身的選項。

// 定義一個混入對象
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!"

二、選項合並

　　當組件和混入對象含有同名選項時，這些選項將以恰當的方式進行“合並”。

1、比如，數據對象在內部會進行遞歸合並，並在發生沖突時以組件數據優先。

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

　　可以看到 data 里以組件里的message優先級更高。

2、同名鈎子函數將合並為一個數組，因此都將被調用。另外，混入對象的鈎子將在組件自身鈎子之前調用。

var mixin = { created: function () { console.log('混入對象的鈎子被調用') } } new Vue({ mixins: [mixin], created: function () { console.log('組件鈎子被調用') } }) // => "混入對象的鈎子被調用" // => "組件鈎子被調用"

　　可以看到 created 鈎子函數都被調用，並且 mixin 里的 created 優先於組件里的 created 之前調用。

3、值為對象的選項，例如 methods、components 和 directives，將被合並為同一個對象。兩個對象鍵名沖突時，取組件對象的鍵值對。

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 實例。使用恰當時，這可以用來為自定義選項注入處理邏輯。

// 為自定義的選項 'myOption' 注入一個處理器。
Vue.mixin({ created: function () { var myOption = this.$options.myOption if (myOption) { console.log(myOption) } } }) new Vue({ myOption: 'hello!' }) // => "hello!"

　　使用 Vue.mixin 進行全局注冊。

注意：請謹慎使用全局混入，因為它會影響每個單獨創建的 Vue 實例 (包括第三方組件)。大多數情況下，只應當應用於自定義選項，就像上面示例一樣。推薦將其作為插件發布，以避免重復應用混入。

四、自定義選項合並策略

　　自定義選項將使用默認策略，即簡單地覆蓋已有值。如果想讓自定義選項以自定義邏輯合並，可以向 Vue.config.optionMergeStrategies 添加一個函數：

Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) { // 返回合並后的值
}

　　對於多數值為對象的選項，可以使用與 methods 相同的合並策略：

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

　　可以在 Vuex 1.x 的混入策略里找到一個更高級的例子：

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

五、與vuex的區別

　　很多同學可能看到這里會有一些疑問，這不就跟Vuex差不多嘛，其實不是的：

　　mixin混入對象和Vuex的區別：

1、Vuex是狀態共享管理，所以Vuex中的所有變量和方法都是可以讀取和更改並相互影響的；

2、mixin可以定義公用的變量或方法，但是mixin中的數據是不共享的，也就是每個組件中的mixin實例都是不一樣的，都是單獨存在的個體，不存在相互影響的；

3、mixin混入對象值為函數的同名函數選項將會進行遞歸合並為數組，兩個函數都會執行，只不過先執行mixin中的同名函數；

4、mixin混入對象值為對象的同名對象將會進行替換，都優先執行組件內的同名對象，也就是組件內的同名對象將mixin混入對象的同名對象進行覆蓋；

六、與父子組件的區別

　　子組件在引用之后相當於在父組件內開辟了一塊單獨的空間，來根據父組件props過來的值進行相應的操作，但本質上兩者還是涇渭分明，相對獨立。

　　而mixins則是在引入組件之后，將組件內部的內容如data等方法、method等屬性與父組件相應內容進行合並。相當於在引入后，父組件的各種屬性方法都被擴充了。

　　單純組件引用：父組件 + 子組件 >>> 父組件 + 子組件

　　mixins：父組件 + mixin組件 >>> new父組件

　　mixin作用：多個組件可以共享數據和方法，在使用mixin的組件中引入后，mixin中的方法和屬性也就並入到該組件中，可以直接使用。鈎子函數會兩個都被調用，mixin中的鈎子首先執行。