Mixins的使用

说明： 混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

例如：

// 定义一个混入对象
var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}

// 定义一个使用混入对象的组件
var Component = Vue.extend({
  mixins: [myMixin]
})

var component = new Component() // => "hello from mixin!"

选项合并：

1. 发送冲突时以组件数据优先
2. 同名钩子函数将合并为一个数组，因此都会被调用

全局混入：

混入也可以进行全局注册。使用时格外小心！一旦使用全局混入，它将影响每一个之后创建的 Vue 实例。使用恰当时，这可以用来为自定义选项注入处理逻辑。

import Mixin from './mixins';
Vue.mixin(Mixin);

需要注意的地方：

1. 同名勾子函数都会被调用，但是混入勾子在组件自身勾子前调用。
2. data中的数据发生冲突时，以组件自身数据为准。
3. 慎用全局混入，

使用mixins的思考

页面的风格不同，但是执行的方法和需要的数据类似，我们是选择每个都写呢还是提取出公共部分呢？对此需要斟酌，使用minxins会造成后续修改维护麻烦的问题。

应该避免在mixins中编写大量逻辑不独立的代码。