vue---mixins的用法

相信大家都用過less、sass等預編譯器。它們中也有mixins，用法也很簡單，例如Less中：

.box{
  border:1px solid red;
  padding:10px;    
}
.mixin{
  .box;
  margin:10px;    
}

編譯之后就成了：

.box{
  border:1px solid red;
  padding:10px;    
}
.mixin{
  border:1px solid red;
  padding:10px;
  margin:10px;    
}

這樣就減少了寫的代碼量。也達到了公用相同樣式的目的。

 

而 vue的mixins也是同樣的道理。使用公用的內容，達到指定或者所有的實例都共享這些內容。

 

那么，vue中的mixins可以定義哪些內容呢？

官網的說明：混入對象可以包含任意組件選項。當組件使用混入對象時，所有混入對象的選項將被混入該組件本身的選項。

大致意思就是：

1） 混入對象的內容必須是一個對象。

2） 當使用混入時，相同的內容都會合並。

3） 數據對象如果有相同的，則以被混入的對象中data數據為准

后面會詳細解釋一下這幾個意思。

HTML：

<div id="box">{{name}}：{{age}}，{{sex}}，{{print()}}，{{say}} </div>

JS：

var mix={
    el:"#box",
    data:{
        age:18,
        sex:'female',
        name:'八戒'
    },
    mounted:function(){
        this.age++;
        console.log(this.age)//11
    },
    computed:{
        say:function(){
            return '我在mix里面'
        }
    },
    methods:{
        print:function(){
            return '這里是mix';
        }
    }
}

new Vue({
//    el:"#box",
    mixins:[mix],
    data:{
        age:10
    },
    mounted:function(){
        this.age+=2;
        console.log(this.age)//13 this.sex='male';
    },
    computed:{
        say:function(){
            return '我在new Vue里面'
        }
    },
    methods:{
        print:function(){
            return '這里是new Vue';
        }
    }
})

結果：

注意：

1） mixins 這個屬性接收的是 一個數組 可以有多個mixins的內容，比如：mixins：[ mix1, mix2 , mix3]，前提是定義了這些混入對象，不然就會報錯。

2） 從上個栗子可以看出，只要是屬於實例（或組件）的內容都是可以混入的，包括 el  。。。  

3） 混入對象中如果有生命周期的 鈎子 ，那么 混入對象  和 被混入對象的鈎子都會被執行一遍，而且 混入對象的鈎子將在  實例（或組件）自身鈎子之前先執行。因為同名鈎子函數將混合為一個數組，因此都將被調用。

4） 混入的方法methods，計算屬性computed ，組件components，數據data等，只要值是為對象的，都是會被合並的。並且如果有相同的鍵值 ， 則會以 被混入對象中的 鍵值 即 以實例（或對象）中的內容為准。

4） 比如在 data 中 age 這一項是相同的，這個時候是以 被混入 的對象中數據 優先 。

5） 所以 age 是 13 就很好理解了。 首先  被混入的對象的data數據優先，那么 age就是 10 ；然后 到達生命周期 mounted 的時候，混入的對象中的代碼，執行一次，被混入的實例中的代碼，再執行一次。 所以最終的結果就是13。

 

全局混入

當然，mixins也有全局混入的方法，不過這樣會讓所有的實例都共享混入的內容。混入的規則還是一樣的。

Vue.mixin({
   //這里是要混入的內容
})

 請謹慎使用全局混入的方法。畢竟只要使用了全局混入，所有實例都會共享  混入的內容  不管你是否   添加了  mixins 這個屬性選項。

 

自定義選項合並策略

詳細的可以查看官網 自定義選項合並策略