编码中的mixin

基础

一个mixin是一个对象可以包含任意组件选项，通常用js文件，并在文件导出该对象。再在组件之间复用。

// 定义一个混入对象
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. 同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。
3. 值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。

开发上

我通常

1. 多个组件使用较多的同样的方法，我会抽取computer, data, 一些通用的方法
2. 组件文件过大，抽取成几个mixin, 每个负责一个功能。
3. 组件通用时，很多很杂，也有很多通用的方法，数据，计算属性。都会拉到mixin, 计算属性一般只在mixin。

其他

官网上文档还介绍了全局混入和自定义选项合并策略