Vue Mixin 混入

1.簡介

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

2.基本使用

2.1 定義混入

首先，在混入中定義的往往是可復用的內容，因此，一般會單獨建立一個文件夾 mixin，專門用于存放混入文件。

let testMixin = {created() {console.log("這是testMixin中的created方法！");},methods: {hello() {console.log("hello from testMixin!");}},
}export default testMixin

2.2 使用混入

此時，在主頁組件 index.vue 中，沒有定義任何的 created、methods 或 mounted等，但是此時打開控制臺：

說明此時執行了混入中定義的 created 方法！

此時，再為主頁組件加上 mounted 生命周期鉤子，并在其中使用this.hello()

控制臺打印出的結果為：

即成功執行了混入對象中定義的方法 hello()，也驗證了當前組件中合并了混入對象中定義的選項和方法。這就是混入的基本使用。

2.選項合并

當組件和混入對象含有同名選項時，這些選項將以恰當的方式進行“合并”。數據對象在內部會進行遞歸合并，并在發生沖突時以組件數據優先。

仍然使用上面的例子，我們在混入對象 testMixin 中，已經定義了一個方法 hello()。那么如果此時我們在主頁組件中再定義一個 hello() 方法，mounted 中執行的會是哪一個 hello() 呢？

最終，控制臺打印結果如下：

此時，同名的 created 生命周期鉤子進行了合并，合并為一個數組，因此都將被調用。另外，混入對象的鉤子將在組件自身鉤子之前調用。

而 methods 中的 hello 方法因為沖突，在合并時保留組件中的hello，即優先當前組件的選項，因此打印的是“hello from home!”。

3.可復用性與全局混入

3.1 可復用性

開篇提過，混入對象可成為一個可復用功能，我們在另外的組件中引入已定義的混入對象，可實現同樣的邏輯與功能。

那么有個問題，如果很多個組件同時使用同一個混入對象，這時候都要重復一個步驟，就是先導入混入對象，然后再使用，類似如下：

<script>
import myMixins from "../mixins";
export default {mixins: [myMixins]
};
</script>

這樣未免有點繁瑣，且代碼冗余，此時我們可以使用全局混入來優化這個問題。

3.2 全局混入

在 Vue 中，混入也可以進行全局注冊。

例如這里，我們在 main.js 中通過Vue.mixin()引入混入對象，后續即可全局使用（作用于該Vue實例下的所有組件）

然后在主頁組件中，將我們原來引入混入的代碼刪除：

此時刷新頁面，查看控制臺輸出信息：

仍然執行了混入中的方法！其效果與在每個組件中單獨引入混入對象相同，這便是全局混入。

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