Vue使用mixin分发组件的可复用功能

vue 创建高阶组件的实现不够 react 优雅，但那是 vue 和 react 的设计思想导致的。在 react 中一切都是函数，而在 vue 中，组件最终都是函数，但在开发时可以是 JSON 对象，而且每个 vue 组件要注意三个点：props、events 和 slots，就是这三个导致 vue 创建高阶组件时要传入相应的属性，较 react 要复杂。vue 官方推荐使用 mixins 来完成高阶组件的功能，如果对 vue 实现高阶组件有兴趣的话推荐看 [vue 实现高阶组件][1]
下面是 vue 官网使用 mixins 的例子：

// 定义一个混入对象
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!"

每个 vue 组件有 mixins 属性接收 mixin 数组，但由于 mixin 与组件，mixin 与 mixin 之间存在属性命名冲突的问题，vue 解决这个的方式是：
1 数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。
2 值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。
3 Vue.extend() 和 new Vue() 创建的组件，解决上述的命名冲突的方案是一样的。