關於vue中的extends,mixins,extend,mixin理解

其實extends,mixins,extend,mixin簡單來說，就是用來抽離出組件間公用的部分，從而使整個代碼達到封裝的目的。
一. mixins
mixins 選項接收一個數組，這個數組可以包含着對象，這個對象裏可以包含着各種選項，比如created,mouted…最合併到組件裏面，使用的是和 Vue.extend() 一樣的選項合併邏輯(可查看官方文檔)

var mixin = {
  created: function () { console.log(1) }
}
var vm = new Vue({
  created: function () { console.log(2) },
  mixins: [mixin]
})
// => 1
// => 2

二.extends
和mixins一樣的功能,優先級的話extends > mixins，另外extends接受的是對象

var CompA = { ... }

// 在沒有調用 `Vue.extend` 時候繼承 CompA
var CompB = {
  extends: CompA,
  ...
}

三. extend
就是創建組件的構造函數。與vue.component類似，可以實現一個組件，到時會寫篇文章做詳細說明。

<div id="mount-point"></div>
// 創建構造器
var Profile = Vue.extend({
  template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
  data: function () {
    return {
      firstName: 'Walter',
      lastName: 'White',
      alias: 'Heisenberg'
    }
  }
})
// 創建 Profile 實例，並掛載到一個元素上。
new Profile().$mount('#mount-point')
結果如下：

<p>Walter White aka Heisenberg</p>

四. mixin
與mixins一樣的功能，只不過它是針對全局的，用法是vue.mixin({…})
官方說：
請謹慎使用全局混入，因爲它會影響每個單獨創建的 Vue 實例 (包括第三方組件)。大多數情況下，只應當應用於自定義選項，就像上面示例一樣。推薦將其作爲插件發佈，以避免重複應用混入。

以上的筆記參考以下網站做的自我總結：
1.https://segmentfault.com/a/1190000010095089
2.https://www.cnblogs.com/battle-wang/p/9673577.html
3.https://www.cnblogs.com/gr07/p/10063937.html
4.vue的官網所講的