前言

在原生開發小程序的過程中，發現有多個頁面都使用了幾乎完全一樣的邏輯。由于小程序官方并沒有提供 Mixins 這種代碼復用機制，所以只能采用非常不優雅的復制粘貼的方式去“復用”代碼。隨著功能越來越復雜，靠復制粘貼來維護代碼顯然不科學，于是便尋思著如何在小程序里面實現 Mixins。

什么是 Mixins

Mixins 直譯過來是“混入”的意思，顧名思義就是把可復用的代碼混入當前的代碼里面。熟悉 VueJS 的同學應該清楚，它提供了更強大了代碼復用能力，解耦了重復的模塊，讓系統維護更加方便優雅。

先看看在 VueJS 中是怎么使用 Mixins 的。

// define a mixin objectvar myMixin = { created: function () { this.hello() }, methods: { hello: function () {  console.log('hello from mixin!') } }}// define a component that uses this mixinvar Component = Vue.extend({ mixins: [myMixin]})var component = new Component() // => "hello from mixin!"

在上述的代碼中，首先定義了一個名為 myMixin 的對象，里面定義了一些生命周期函數和方法。接著在一個新建的組件里面直接通過 mixins: [myMixin] 的方式注入，此時新建的組件便獲得了來自 myMixin 的方法了。

明白了什么是 Mixins 以后，便可開始著手在小程序里面實現了。

Mixins 的機制

Mixins 也有一些小小的細節需要注意的，就是關于生命周期事件的執行順序。在上一節的例子中，我們在 myMixin 里定義了一個 created() 方法，這是 VueJS 里面的一個生命周期事件。如果我們在新建組件 Component 里面也定義一個 created() 方法，那么執行結果會是如何呢？

var Component = Vue.extend({ mixins: [myMixin], created: function () { console.log('hello from Component!') }})var component = new Component()// =>// Hello from mixin!// Hello from Component!

可以看運行結果是先輸出了來自 Mixin 的 log，再輸出來自組件的 log。

除了生命周期函數以外，再看看對象屬性的混入結果：

// define a mixin objectconst myMixin = { data () { return {  mixinData: 'data from mixin' } }}// define a component that uses this mixinvar Component = Vue.extend({ mixins: [myMixin], data () { return {  componentData: 'data from component' } }, mounted () { console.log(this.$data) }})var component = new Component()

在 VueJS 中，會把來自 Mixins 和組件的對象屬性當中的內容（如 data, methods等）混合，以確保兩邊的數據都同時存在。

經過上述的驗證，我們可以得到 VueJS 中關于 Mixins 運行機制的結論：