1. mixin概念

混入 (mixin) 提供了一種非常靈活的方式，來分發(fā) Vue 組件中的可復用功能。一個混入對象可以包含任意組件選項,data、components、methods 、created、computed等等。當組件使用混入對象時，所有混入對象的選項將被“混合”進入該組件本身的選項。當組件使用了mixin時, mixin中的生命周期函數(shù)會先執(zhí)行,然后在執(zhí)行組件中的生命周期;

2. 適用場景

當我們存在多個組件中的數(shù)據(jù)或者功能很相近時，我們就可以利用mixins將公共部分提取出來，通過 mixins封裝的函數(shù)，組件調用他們是不會改變函數(shù)作用域外部的。
作用： 減少data、methods、鉤子函數(shù)等的重復

3. 代碼示例

代碼示例

4. 混入方式

1. 自定義混入的方式如上代碼示例; 開發(fā)者可以根據(jù)自己的需要定義不同的模塊,按需引入;

2. 全局混入

   
   
   代碼示例

• 全局注冊之后會對所有組件都生效，影響比較大, 建議合理使用;

5. mixin 選項合并的方式

1. mixin 中定義的方法和參數(shù)在各組件中不共享，即當前組件對mixins的屬性的修改，其他也引用了這個mixins的組件不會受影響;
2. mixin中定義的生命周期函數(shù)會比引用組件的生命周期先執(zhí)行, 會和組件中定義的methods,created等選項合并調用;
3. mixin對象里的(components、methods 、computed、data)這些選項，混入組件時選項會被合并，重名沖突時優(yōu)先采用組件中定義的數(shù)據(jù)
4. 如果同時引入多個mixin對象, 執(zhí)行順序和引入順序一致;

6. mixin 和 vuex及封裝公共組件的區(qū)別

1. 與vuex的區(qū)別: vuex用來做狀態(tài)管理的，里面定義的變量在每個組件中均可以使用和修改，在任一組件中修改此變量的值之后，其他組件中此變量的值也會隨之修改。而mixin中定義的值,也可以在任意組件中進行修改, 但其他組件的值并不會因此受到影響;(mixin中定義的數(shù)據(jù)在各個組件中相互獨立)
2. 與公用組件的區(qū)別: 在組件中引入公共組件，相當于在父組件中給出一片獨立的空間供子組件使用，然后根據(jù)props來傳值，但本質上兩者是相對獨立的, 但vue不建議修改父組件傳遞的值; 而在組件中直接引入mixin之后, 是可以對mixin中的數(shù)據(jù)進行修改的, 組件中引入mixin本質上是對組件的擴展,從而形成一個新的組件;

參考文檔

官網
Vue — 詳解mixins混入使用，應用場景