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!"
复制代码