Mixins混入
在項目開發(fā)中有兩種情況會用到混入：
1、組件中已經(jīng)寫好了構(gòu)造器，突然需要增加方法或者暫時用到的方法，這時用混入會減少源代碼的污染。
2、很多組件都會用到公用方法，用混入的方法可以減少代碼量，實現(xiàn)代碼重用，提高代碼的可維護性。
一、基礎(chǔ)
<div id="app">
<h2>{{ num }}</h2>
<button @click="add">點擊增加</button>
</div>
//定義一個混入對象
var myMixin = {
//這里的updated是生命周期的一個鉤子
updated: function () {
console.log('這是混入的， 更新后的值是：'+this.num)
}
}
//定義一個使用混入對象的組件
new Vue({
el: "#app",
data: {
num: 10
},
methods: {
add() {
this.num++
}
},
//可以接收多個對象參數(shù)。對象中可以包含任意的組件選項，混入后，對象中的全部選項將混入到組件中。
mixins: [myMixin]
})
二、選型合并，Mixins的調(diào)用順序
當(dāng)組件和混合對象含有同名選項時，這些選項將以恰當(dāng)?shù)姆绞交旌?。比如，同名鉤子函數(shù)將混合為一個數(shù)組，并且都將被調(diào)用。另外，混合對象的鉤子將在組件自身鉤子 之前 調(diào)用：
//在構(gòu)造器中同時加上updated選項
updated: function () {
console.log('這是原生的updated')
}
我們會發(fā)現(xiàn)，執(zhí)行的先后順序是，混入的先執(zhí)行，構(gòu)造器里的后執(zhí)行，所以，并不是誰會把誰覆蓋，而是都執(zhí)行。
值為對象的選項，例如 methods, components 和 directives，被混合為同一個對象。 如果兩個對象鍵名沖突，取組件對象的鍵值對。
<div id="app">
<button @click="add">add</button>
<button @click="reduce">reduce</button>
<button @click="sub">sub</button>
</div>
var myMethods = {
methods: {
reduce(){
console.log('reduce')
},
sub(){
console.log('sub, from mixin')
}
}
}
new Vue({
el: "#app",
data: {
num: 10
},
methods: {
add(){
console.log('add')
},
sub(){
console.log('sub, from self')
}
},
mixins: [myMethods]
})
三、全局混入
全局混入在項目中用的極少，而且盡量不要用。因為 一旦使用全局混合對象，將會影響到所有之后創(chuàng)建的 Vue 實例。使用恰當(dāng)時，可以為自定義對象注入處理邏輯。
//混入對象
var myMixin = {
updated: function () {
// this.num1 = this.num
console.log('這是混入對象的，更新后的值是：'+this.num)
}
}
//全局混入
Vue.mixin({
updated:function(){
console.log('這是全局混入')
}
})
new Vue({
el: "#app",
data: {
num: 10,
// num1: 10
},
methods: {
add() {
this.num++
}
},
//可以接收多個對象參數(shù)。對象中可以包含任意的組件選項，混入后，對象中的全部選項將混入到組件中。
mixins: [myMixin],
updated: function () {
console.log('這是構(gòu)造器里的：'+this.num)
}
})
從圖中可以看出，全局混入的執(zhí)行順序要早于混入和構(gòu)造器里的方法。
