對mixin的理解

1. 什麼是mixin

mixin（混入），提供了一種非常靈活的方式，來分發 Vue 元件中的可複用功能。

本質其實就是一個js物件，它可以包含我們元件中任意功能選項，如data、components、methods、created、computed等等
我們只要將共用的功能以物件的方式傳入 mixins選項中，當元件使用 mixins物件時所有mixins物件的選項都將被混入該元件本身的選項中來。

2. 區域性混入和全域性混入

區域性混入

例子：
定義一個mixin物件，有元件options的data、methods屬性：

var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}
 

元件通過mixins屬性呼叫mixin物件

Vue.component('componentA',{
  mixins: [myMixin]
})

該元件在使用的時候，混合了mixin裡面的方法，在自動執行create生命鉤子，執行hello方法

全域性混入

通過Vue.mixin()進行全域性的混入

Vue.mixin({
  created: function () {
      console.log("全域性混入")
    }
})

使用全域性混入需要特別注意，因為它會影響到每一個元件例項（包括第三方元件）
PS：全域性混入常用於外掛的編寫

注意事項

• 當元件存在與mixin物件相同的選項的時候，進行遞迴合併的時候元件的選項會覆蓋mixin的選項；
• 但是如果相同選項為生命週期鉤子的時候，會合併成一個數組，先執行mixin的鉤子，再執行元件的鉤子；

3.使用場景

在日常的開發中，我們經常會遇到在不同的元件中經常會需要用到一些相同或者相似的程式碼，這些程式碼的功能相對獨立
這時，可以通過Vue的mixin功能將相同或者相似的程式碼提出來。

舉個例子：

定義一個modal彈窗元件，內部通過isShowing來控制顯示

const Modal = {
  template: '#modal',
  data() {
    return {
      isShowing: false
    }
  },
  methods: {
    toggleShow() {
      this.isShowing = !this.isShowing;
    }
  }
}
 

定義一個tooltip提示框，內部通過isShowing來控制顯示

const Tooltip = {
  template: '#tooltip',
  data() {
    return {
      isShowing: false
    }
  },
  methods: {
    toggleShow() {
      this.isShowing = !this.isShowing;
    }
  }
}

通過觀察上面兩個元件，發現兩者的邏輯是相同，程式碼控制顯示也是相同的，這時候mixin就派上用場了

首先抽出共同程式碼，編寫一個mixin

const toggle = {
  data() {
    return {
      isShowing: false
    }
  },
  methods: {
    toggleShow() {
      this.isShowing = !this.isShowing;
    }
  }
}

兩個元件在使用上，只需要引入mixin

const Modal = {
  template: '#modal',
  mixins: [toggle]
};

const Tooltip = {
  template: '#tooltip',
  mixins: [toggle]
}

4. 小結

• 替換型策略有props、methods、inject、computed，就是將新的同名引數替代舊的引數
• 合併型策略是data, 通過set方法進行合併和重新賦值
• 佇列型策略有生命週期函式和watch，原理是將函式存入一個數組，然後正序遍歷依次執行
• 疊加型有component、directives、filters，通過原型鏈進行層層的疊加