一、概念

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

二、應(yīng)用場景

針對一些基本功能一樣，但又存在足夠差異性的組件之間，有兩種解決方案：
（1）一種是拆分成公共組件，但是這種方式一旦功能變動就要在引入的文件中更新代碼，這違背了DRY原則，反之，太多的props傳值會很快變得混亂，導(dǎo)致項目維護(hù)難度增加。
（2）另一種是使用Mixin，Vue 中的Mixin對編寫函數(shù)式風(fēng)格的代碼很有用，因?yàn)楹瘮?shù)式編程就是通過減少移動的部分讓代碼更好理解。Mixin允許你封裝一塊在應(yīng)用的其他組件中都可以使用的函數(shù)。如果使用姿勢得當(dāng)，他們不會改變函數(shù)作用域外部的任何東西，因此哪怕執(zhí)行多次，只要是同樣的輸入你總是能得到一樣的值，真的很強(qiáng)大！

三、基礎(chǔ)使用

（1）常規(guī)操作先建一個mixin文件夾，然后定義一個 js 文件(mixin.js), 為了使用Mixin我們需要輸出一個對象。

export default {
 data() {
  return {
   name: 'mixin'
  }
 },
 created() {
  console.log('mixin...', this.name);
 },
 mounted() {},
 methods: {}
}

多個組件可以共享數(shù)據(jù)和方法，在使用mixin的組件中引入后，mixin中的方法和屬性也就并入到該組件中，可以直接使用。鉤子函數(shù)會兩個都被調(diào)用，mixin中的鉤子首先執(zhí)行。
（2）在Modal.vue中引入這個Mixin:

import Child from './Child'
import toggle from './mixins/toggle'

export default {
    name: 'modal',
    mixins: [toggle],
    components: {
      appChild: Child
    }
  }

即便我們使用的是一個對象而不是一個組件，生命周期函數(shù)對我們來說仍然是可用的，理解這點(diǎn)很重要。我們也可以這里使用mounted()鉤子函數(shù)，它將被應(yīng)用于組件的生命周期上。這種工作方式真的很靈活也很強(qiáng)大。

mixin混入對象和Vuex的區(qū)別：

（1）Vuex是狀態(tài)共享管理，所以Vuex中的所有變量和方法都是可以讀取和更改并相互影響的；
（2）mixin可以定義公用的變量或方法，但是mixin中的數(shù)據(jù)是不共享的，也就是每個組件中的mixin實(shí)例都是不一樣的，都是單獨(dú)存在的個體，不存在相互影響的；
（3）mixin混入對象值為函數(shù)的同名函數(shù)選項將會進(jìn)行遞歸合并為數(shù)組，兩個函數(shù)都會執(zhí)行，只不過先執(zhí)行mixin中的同名函數(shù)；
（4）mixin混入對象值為對象的同名對象將會進(jìn)行替換，都優(yōu)先執(zhí)行組件內(nèi)的同名對象，也就是組件內(nèi)的同名對象將mixin混入對象的同名對象進(jìn)行覆蓋。