vue-api之mixins混入

平時vue官網介紹的api一般不用到都很少回去關注，這次在一個github的一個開源項目中又看到一個mixins這個api。
官方的文檔說明是這樣的:

mixins 選項接受一個混入對象的數組。這些混入實例對象可以像正常的實例對象一樣包含選項，他們將在 Vue.extend() 裏最終選擇使用相同的選項合併邏輯合併。舉例：如果你的混入包含一個鉤子而創建組件本身也有一個，兩個函數將被調用。

Mixin 鉤子按照傳入順序依次調用，並在調用組件自身的鉤子之前被調用。

！！！先提一下這裏官方不建議我們將mixins用到全局，不然有可能會影響到一些第三方插件。
意思就是說一些某幾個頁面在如created或者mounted這樣的生命週期中要執行的方法可以統一封裝到一個公共的js中然後再需要的頁面通過mixins這個api來使用，這樣在這個頁面中的生命週期中就會有mixins中的方法了。
這裏的程序執行順序會先執行mixins的方法完成之後纔會去執行頁面生命週期中的方法，mixins的執行順序是按照引入的順序進行的。
mixins.js

export default {
  data() {
    return {
      mixinsMsg: 'it is mixins'
    }
  },
  created() {
    console.log(this.mixinsMsg, 'mixins created')
  },
  mounted() {
    console.log(this.mixinsMsg, 'mixins mounted')
  }
}

mixins2.js

export default {
  data() {
    return {
      mixinsMsg: 'it is mixins2'
    }
  },
  created() {
    console.log(this.mixinsMsg, 'mixins2 created')
  },
  mounted() {
    console.log(this.mixinsMsg, 'mixins2 mounted')
  }
}

mixins.vue

<template>
  <div class='mixins'>
    mixins
  </div>
</template>

<script>

import mixin from '../../util/mixins.js'
import mixin2 from '../../util/mixins2.js'

export default {
  data() {
    return {
      mixinsParents: 'mixinsParents'
    };
  },
  mixins: [mixin,mixin2],
  created() {
    console.log(this.mixinsParents, this.mixinsMsg, 'parents created')
  },
  mounted() {
    console.log(this.mixinsParents, this.mixinsMsg, 'parents mounted')
  }
}
</script>
<style lang='scss' scoped>
  
</style>

執行結果