Vue：Mixins混合選項操作

Mixins混入

在專案開發中有兩種情況會用到混入：

1、元件中已經寫好了構造器，突然需要增加方法或者暫時用到的方法，這時用混入會減少原始碼的汙染。

2、很多元件都會用到公用方法，用混入的方法可以減少程式碼量，實現程式碼重用，提高程式碼的可維護性。

一、基礎

<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++
        }
    },
    //可以接收多個物件引數。物件中可以包含任意的元件選項，混入後，物件中的全部選項將混入到元件中。
    mixins: [myMixin]
})

二、選型合併，Mixins的呼叫順序

當元件和混合物件含有同名選項時，這些選項將以恰當的方式混合。比如，同名鉤子函式將混合為一個陣列，並且都將被呼叫。另外，混合物件的鉤子將在元件自身鉤子 之前 呼叫：

//在構造器中同時加上updated選項
updated: function () {
    console.log('這是原生的updated')
}

我們會發現，執行的先後順序是，混入的先執行，構造器裡的後執行，所以，並不是誰會把誰覆蓋，而是都執行。

值為物件的選項，例如 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]
    })

三、全域性混入

全域性混入在專案中用的極少，而且儘量不要用。因為 一旦使用全域性混合物件，將會影響到所有之後建立的 Vue 例項。使用恰當時，可以為自定義物件注入處理邏輯。

//混入物件
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++
        }
    },
    //可以接收多個物件引數。物件中可以包含任意的元件選項，混入後，物件中的全部選項將混入到元件中。
    mixins: [myMixin],
    updated: function () {
        console.log('這是構造器裡的：'+this.num)
    }
})

從圖中可以看出，全域性混入的執行順序要早於混入和構造器裡的方法。

謹慎使用全域性混合物件，因為會影響到每個單獨建立的 Vue 例項（包括第三方模板）。