Alex宅幹嘛_ReVue_Day14筆記_Mixin

Mixins

Mixins 可以用來集中管理在 Vue 元件中時常會被用到的功能。而 Mixins 物件可以放入 Vue 物件的任何屬性，像是 methods, computed 這些都可以。

基本用法

<div id="app">
  <button @click="Log">log</button>
</div>

<script>
const mixin1 = {
  methods: {
	  Log(payload) {
	    console.log(payload)
	  }
  }
}

new Vue({
  el: '#app',
  mixins: [mixin1]
})

mixins與使用元件的方法和hooks之間的權重

這邊要稍微提一下，當 mixin 裡面有和使用的元件的方法或 hooks 有重複的情況，那他們之間的優先序是如何。
首先，當 hooks 重複，則 mixins 裡面的內容和使用元件的 hooks 的內容會被併在一起，且全部內容都會被顯示，而顯示的順序是先顯示 mixin 的內容，之後，再顯示使用元件的 hooks 內容，
由此可以看的出來使用元件的優先序較高。

第二，若 methods 有重複的時候，比如在 mixins 的 methods 中的一個方法跟使用元件的 methods 重複了，則使用元件自己本身的 methods 的內容會覆蓋掉 mixin 重複的方法。
ex:

const mixin1 = {
  methods: {
    log(payload) {
	    console.log('m1')
	 }
  }
}

new Vue({
  el: '#app',
  mixins: [mixin1],
  methods: {
    log(payload) {
	  console.log('Vue1')
	 }
  }
})

以上範例，重複的 log 方法，會由 Vue 物件將引用的 mixin1 中重複的 log 方法給覆蓋掉。

Global Mixin

這個功能官方文件特別聲明要小心使用，因為你一但註冊了一個全域的 mixin 則，所有的 Vue 元件都會吃到這個 mixin 內容，甚至是你使用的第三方套件也會吃到。
所以，文件中是建議你將這種全域的 mixin 做成 plugin，來避免重複使用。