官方文件：https://cn.vuejs.org/v2/guide/mixins.html

混入

混入 (mixin) 提供了一種非常靈活的方式，來分發 Vue 元件中的可複用功能。一個混入物件可以包含任意元件選項。當元件使用混入物件時，所有混入物件的選項將被“混合”進入該元件本身的選項。

1、首先我們瞭解，vue mixin api分為元件級 和 全域性級（這裡元件級就隻影響當前的元件，全域性的影響所以元件）

2、元件級mixins 使用方法

<template>
  <div>
    <p>{{message}}</p>
  </div>
</template>

<script>
var
 
 mixin = {
  data: function () {
    return {
      message: 'hello',
    }
  },
  mounted(){
    console.log('混入物件的鉤子被呼叫')
  },
  created() {
    
  },
  // ...
}
export default {
  name: "home",
  mounted(){
    console.log('元件鉤子被呼叫')
  },
  mixins:[mixin],
};
</script>

<style scoped>
</style>

注意： 當元件和混入物件含有同名選項時，這些選項將以恰當的方式進行“合併”。

比如，資料物件在內部會進行遞迴合併，並在發生衝突時以元件資料優先。

同名鉤子函式將合併為一個數組，因此都將被呼叫。另外，混入物件的鉤子將在元件自身鉤子之前呼叫。

值為物件的選項，例如methods、components和directives，將被合併為同一個物件。兩個物件鍵名衝突時，取元件物件的鍵值對。

總結：元件物件優先順序 > 混入物件 （重複的以元件優先，但是上面有提到同名鉤子函式都會被呼叫）

列印結果如下：

3、全域性級mixin 使用

注意：混入也可以進行全域性註冊。使用時格外小心！一旦使用全域性混入，它將影響每一個之後建立的 Vue 例項。使用恰當時，這可以用來為自定義選項注入處理邏輯。

在 main.js 中加入全域性混入

// 全域性混入（影響所以例項，小心使用）
Vue.mixin({
  created: function () {
    console.log('混入created物件的鉤子被呼叫');
  }
})

所以元件建立都會執行該混入