1、什麼是mixins？
在開發中有這麼一種情況，當你有兩個非常相似的組件，它們的功能極其相似，但它們局部稍有不同，現在你的做法是將它們分成兩個不同的組件？還是隻保留一個組件，局部差異的部分採用props控制呢？
這些解決方案都不是完美的，如果將它們拆分爲兩個不同的組件，這時功能發生變化，那麼必須在兩個地方修改它們，而且這種方式也違背了DRY原則（Don’t Repeat Yourself）。如果採用過多的props控制組件的差異，這種維護起來將會很複雜，可能減慢你開發的速度。
DRY原則：Don't repeat yourself (DRY, or sometimes do not repeat yourself)
is a principle of software development aimed at reducing repetition of
software patterns,[1] replacing it with abstractions or using data
normalization to avoid redundancy.
Vue中的Mixins基本上是一塊定義的邏輯，由Vue以特定的規定方式存儲，可以反覆使用，爲Vue實例和組件添加功能。因此，Vue mixins可以在多個Vue組件之間共享，而無需重複代碼塊。使用過SASS的CSS預處理器的人對mixin應該有很好的瞭解。
2、mixins爲什麼重要？
- 使用Vue mixins，您可以輕鬆地在編程中遵循DRY原則，這可以確保您不會重複自己。
- 使用Vue mixins，您還可以獲得靈活的選擇，mixin對象包含Vue組件的選項，因此混合了mixin和組件選項。
- Vue mixins也是安全的，如果寫得好，它們不會影響超出其定義範圍的變化。
- 它們是代碼可重用性的絕佳平臺。
3、mixins實例
合併規則：
- 數據對象在內部會進行遞歸合併，並在發生衝突時以組件數據優先。
- 同名鉤子函數將合併爲一個數組，因此都將被調用。另外，混入對象的鉤子將在組件自身鉤子之前調用。
- 值爲對象的選項，例如 methods、components 和 directives，將被合併爲同一個對象。兩個對象鍵名衝突時，取組件對象的鍵值對。
3.1、局部mixins
//toggle.js
export const toggle = {
data() {
return {
"show": false
}
},
methods: {
changeState() {
this.show = !this.show;
}
}
};<template>
<div>
<div v-show="show">
<p>提示框</p>
</div>
<button @click="changeState">click</button>
</div>
</template>
<script>
import {toggle} from './mixins/toggle'
export default {
mixins: [toggle]
}
</script>運行結果：
3.2、全局mixins
<script>
import vue from 'vue'
vue.mixin({
created() {
//自定義選項
const myOption = this.$options.myOption;
if (myOption) {
//如果myOption有值則打印
console.log(myOption);
}
}
})
export default {
myOption: "hello world!"
}
</script>注意：請謹慎使用全局混入，因爲它會影響每個單獨創建的 Vue 實例 (包括第三方組件)。大多數情況下，只應當應用於自定義選項，就像上面示例一樣。推薦將其作爲插件發佈，以避免重複應用混入。
4、總結
我們在此處提到的所有內容在構建可能會增加複雜性的應用程序時都會派上用場。您希望定義許多可重用的函數，或者以可以跨組件重用的方式對它們進行格式化，因此您不必一遍又一遍地定義相同的內容。