vue中mixins的使用方法和区别
Mixins基础和介绍
混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
使用场景
不同页面使用的方法类似，或需要的数据类似时，可以提取出公共部分，再混入不同页面中，方便统一管理和修改。
使用方法
1. 创建一个js文件
// export一个需要混入的对象
export default {
data() {
num: 0,
},
methods: {
ceshi() {
console.log('测试：'+this.num);
}
}
};
2. 在目标页面或组件中混入
// 将之前创建的js文件引入
import ceshi from './ceshi.js'
export default {
// 混入对象
mixins: [ceshi],
create() {
this.ceshi() // 会打印“测试：0”
}
};
-
当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。也就是说当组件中有同名数据和对象时，mixins中的选项户被覆盖，以组件中定义的为准。
-
同名钩子函数将会混合为一个数组，都将被调用到，但是混入对象的钩子将在组件自身钩子之前调用。
-
mixins中的方法和参数在各组件中不共享，如果两个不同组件混入同一个js文件，其中一个组件改变data里的数据，并不会影响另外组件的混入data数据。
区别和联系
-
Mixins：组件内部的内容如data、method等属性与父组件相应内容进行合并。相当于在引入后，父组件的各种属性方法都被扩充了。
全局函数：并不会被混入页面组件中，而只是调用相应的方法或属性。 -
vuex：用来做状态管理的，里面定义的变量在每个组件中均可以使用和修改，在任一组件中修改此变量的值之后，其他组件中此变量的值也会随之修改。
Mixins：可以定义共用的变量，在每个组件中使用，引入组件中之后，各个变量是相互独立的，值的修改在组件中不会相互影响。 -
组件：在父组件中引入组件，相当于在父组件中给出一片独立的空间供子组件使用，然后根据props来传值，但本质上两者是相对独立的。
Mixins：则是在引入组件之后与组件中的对象和方法进行合并，相当于扩展了父组件的对象与方法，可以理解为形成了一个新的组件。
更多可以参考以下链接
vue中mixins的使用方法和注意点（详）.
Vue 之 Mixins （混入）.
vue中mixins的理解及应用.