Vue中有兩個較為高級的靜態方法mixin和extend，接下來我們來討論下關于他們各自的原理和使用場景。

Mixin：

原理：

先來看看官網的介紹：

參數：{Object} mixin

用法：

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

// 為自定義的選項 'myOption' 注入一個處理器。   Vue.mixin({    created: function () {     var myOption = this.$options.myOption     if (myOption) {      console.log(myOption)     }    }   })      new Vue({    myOption: 'hello!'   })   // => "hello!"

我們知道，Vue.mixin傳遞的這個參數對象，在初始化Vue實例的時候會merge到options上，下面是Vue源碼中對mixin的操作。

// src/core/global-api/mixin.js export function initMixin (Vue: GlobalAPI) {  Vue.mixin = function (mixin: Object) {   this.options = mergeOptions(this.options, mixin)   return this  } }// src/core/instance/index.js function Vue (options) {   if (process.env.NODE_ENV !== 'production' &&   !(this instanceof Vue)   ) {   warn('Vue is a constructor and should be called with the `new` keyword')   }   this._init(options) }  initMixin(Vue) ...  export default Vue

也就是說，mixin只是對我們在初始化Vue實例時傳遞的配置對象的一個擴展。

就像上面官網實例寫的例子，我們在執行Vue.mixin方法時傳遞一個配置對象進去，對象里面有個created勾子函數，通過源碼我們可以看到這個傳遞進來的對象最終會和我們在初始化實例也就是new Vue(options)時的這個options合并(通過上面源碼中的mergeOptions方法),保存在option上。

使用場景：

當我們需要全局去注入一些methods,filter或者hooks時我們就可以使用mixin來做。 比如我們希望每一個Vue實例都有一個print方法，我們就可以這么做：

Vue.mixin({    methods: {      print() {        console.log(`我是一個通過mixin注入的方法！`)      }    }  })

或者我們想要去監聽在什么階段時什么組件被加載了，被卸載了等等，我們可以這么做：

Vue.mixin({    mounted() {      console.log(`${this.$route.name} component mounted!`)    },    destroyed() {      console.log(`${this.$route.name} component destroyed!`)    }  })

如果我們并不想給每一個組件實例都混入這些配置options，而只是個別的組件，最好不要使用mixin，它可能會影響到我們組件的性能。

Extend：

原理：

先來看看官網的介紹：

參數：{Object} options

用法：

使用基礎 Vue 構造器，創建一個“子類”。參數是一個包含組件選項的對象。