mixin在官网上的解释为"混合”-以组件使用混合对象时，所有混合对象的选项将被混入该组件本身的选项。
但是笔者觉得，如果从面向对象层面去解释，会更清楚些。我们知道，面向对象三大基本特征是：抽象，封装和继承。
组件，就是对功能的抽象，通过封装而成为完成某个特定功能的模块。Vue的宗旨是，组件是最小粒度，通过组合不同的组件，实现更加复杂的UI（与React一样）。
那么，如果组件之间有某些共性呢？这时，就应该用到继承。将通用的逻辑封装为功能模块，提供给不同组件使用。如果是Java，继承时通过extend父类/接口实现，在Vue中，并没有extend的关键字，但是，mixin可以完成类似效果，即复用/混合。
假设我们有两个下拉组件，核心代码，即列表生成，列表项选中等操作是完全一样的，只是显示效果不同。那么，可以采用如下方式实现继承关系：
// commonList.js
export default {
props: {
items: []
}
data(){
return { selectedItem: null};
}
...
}
//DropdownA.vue
import commonList from '.commonList';
export default {
name: 'DropdownA',
mixins: [commonList ]
}
//dropdownB.vue
import commonList from '.commonList';
export default {
name: 'DropdownB',
mixins: [commonList ]
}
如果组件和基类对象含有【同名属性】时：
- 对于created，mounted 等生命周期函数 mixin文件中的代码先执行，组件中的后执行
- 对于data中定义的字段，组件中定义组件覆盖mixin中同名字段
- 对于 method中的同名方法，组件内的同名方法覆盖mixin中的方法
