Vue.js可複用性 & 組合

混入（mixins）

在實際的應用中，有不少的業務代碼是能夠重複使用的，vue.js自己是一個注重於高效率的框架，因此也提供了組件中的複用功能。混入 (mixins) 是一種分發 Vue組件中可複用功能的很是靈活的方式。混入對象能夠包含任意組件選項。當組件使用混入對象時，全部混入對象的選項將被混入該組件自己的選項。以下：

// 定義一個混入對象
var mixinTest = {
  created: function () {
    this.mixinMethod()
  },
  methods: {
    mixinMethod: function () {
      console.log('mixinMethod from mixin!')
    }
  }
}

// 定義一個使用混入對象的組件
var Component = Vue.extend({
  mixins: [mixinMethod]
})

var component = new Component() // => "hello from mixin!"
複製代碼

組件和混入對象含有同名選項時

從中能夠發現當組件混入對象時，對象的方法以及鉤子都被混入了該組件的自己。這種方式是很靈活的。那要是組件和混入對象含有同名選項時，也是有規則的，好比，當數據上和組件有同名時，以組件的數據爲先。

var mixin = {
  data: function () {
    return {
      testA: 'aaaa',
      testB: 'bbbb'
    }
  }
}

new Vue({
  mixins: [mixin],
  data: function () {
    return {
      testA: 'AAAA',
      testC: 'CCCC'
    }
  },
  created: function () {
    console.log(this.$data)
    // => { testA: "AAAA", testB: "bbbb", testC: "CCCC" }
  }
})
複製代碼

mixins對象裏的testA和testB混入到了組件中的data中，同時出現了testA與組件同名，因此優先保留了組件的數據。

混入對象與組件具備同名鉤子函數時

var mixin = {
  created: function () {
    console.log('混入對象的鉤子')
  }
}

new Vue({
  mixins: [mixin],
  created: function () {
    console.log('組件的鉤子')
  }
})

// => "混入對象的鉤子"
// => "組件的鉤子"
複製代碼

能夠發現混入對象的鉤子和組件的鉤子都會執行，可是會先執行混入對象的鉤子

值爲對象的選項時，例如：methods，components等的時候

var mixin = {
  methods: {
    mixinsMethod: function () {
      console.log('mixinsMethod')
    },
    sameMethod: function () {
      console.log('from mixin')
    }
  }
}

var vm = new Vue({
  mixins: [mixin],
  methods: {
    selfMethod: function () {
      console.log('selfMethod')
    },
    sameMethod: function () {
      console.log('from self')
    }
  }
})

vm.mixinsMethod() // => "mixinsMethod"
vm.selfMethod() // => "selfMethod"
vm.sameMethod() // => "from self"
複製代碼

由上可得，在值爲對象的混入對象混入時，這些將和組件原有的選項混合一塊兒成爲一個對象，當對象的鍵名與組件的鍵名出現重複時，會使用組件的鍵名。

全局混入

以上列舉的都是單獨的引入到某一個組件中使用。也能夠全局註冊混入對象。這樣的話全部的實例就都會被混入的對象所做用。也能夠根據本身須要作成一個具體的使用工具類。供全局全部的實例使用。不過也要當心使用，畢竟會影響到全部的組件，須要結合實際場景使用。

Vue.mixin({
  created: function () {
    var option = this.$options.text
    if (option) {
      console.log(option)
    }
  }
})
new Vue({
  text: 'globalMixins!'
})
// => "globalMixins!"
複製代碼