Vue-mixin(混入)
1.官方定义：
混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
2.功能：
把多个组件共用的配置提取成一个混入对象
3.使用场景
多个组件中都用到了一些公用的方法、数据时。
4.使用方法：
第一步定义混合
新建一个mixin文件夹，创建一个JS文件
export const myMixin = {
mounted() {
console.log("1111")
},
data() {
return {
x: 1
}
},
methods: {
showModel() {
alert(this.name);
}
},
...
}
记得导出~
第二步使用混入
首先在要使用的组件中import引入
import {myMixin} from "../mixin/mixin1.js"
然后注册
（1）.局部混入：mixins: [myMixin1，myMixin2 ]
（2）.全局混入： Vue.mixin(xxxx)
混入可以进行全局注册。使用时格外小心！一旦使用全局混入，它将影响每一个之后创建的 Vue 实例。使用恰当时，这可以用来为自定义选项注入处理逻辑。
5.选项合并
（1） 数据对象data在内部会进行递归合并，并在发生冲突时以组件数据优先。
（2）同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。
（3）值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。
6.拓展
（1）.组件引入多个混入时，执行顺序问题
执行顺序与引入（import）顺序无关，而与注册顺序（mixins: [myMixin1，myMixin2] ）有关，先注册的先执行。
（2）.组件引入多个混入时，冲突问题
数据对象（data）在内部会进行递归合并，在发生冲突时，后注册的混入中的数据会覆盖前面的数据。
同名钩子函数将合并为一个数组，因此都将被调用。执行顺序与注册顺序一致。
值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。发生冲突时，取后注册的键值对。
（3）. 与vuex的区别
vuex：用来做状态管理的，里面定义的变量在每个组件中均可以使用和修改，在任一组件中修改此变量的值之后，其他组件中此变量的值也会随之修改
Mixins：可以定义共用的变量，在每个组件中使用，引入组件中之后，各个变量是相互独立的，值的修改在组件中不会相互影响
（4）.与公共组件的区别
组件：在父组件中引入组件，相当于在父组件中给出一片独立的空间供子组件使用: 然后根据props来传值，但本质上两者是相对独立的
Mixins：则是在引入组件之后与组件中的对象和方法进行合并，相当于扩展了父组件的对象与方法，可以理解为形成了一个新的组件
（5）.与Vue.extend()区别
Vue.extend()
-
用法：
使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。
data选项是特例，需要注意 - 在Vue.extend()中它必须是函数<div id="mount-point"></div>// 创建构造器 var Profile = Vue.extend({ template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>', data: function () { return { firstName: 'Walter', lastName: 'White', alias: 'Heisenberg' } } }) // 创建 Profile 实例，并挂载到一个元素上。 new Profile().$mount('#mount-point')结果如下：
<p>Walter White aka Heisenberg</p>区别：
①.两个都可以理解为继承，
mixins接收对象数组，可引入多个
extends接收的是对象或函数,只能暴露一个
extends对象。②.
extends会比mixins先执行。③.mixins类似于面向切片编程（AOP）
extend用于创建Vue实例，他类似于面向对象编程
(6).mixins中的异步请求
-
当混合里面包含异步请求函数，而我们又需要在组件中使用异步请求函数的返回值时，我们应不要返回结果而是直接返回异步函数
参考文章链接：blog.csdn.net/weixin_4504…
\
