一、什么是Mixins？
mixins（混入），官方的描述是一种分发 Vue 组件中可复用功能的非常灵活的方式，mixins是一个js对象，它可以包含我们组件中script项中的任意功能选项，如data、components、methods 、created、computed等等。我们只要将共用的功能以对象的方式传入 mixins选项中，当组件使用 mixins对象时所有mixins对象的选项都将被混入该组件本身的选项中来，这样就可以提高代码的重用性，使你的代码保持干净和易于维护。
二、什么时候使用Mixins？
当我们存在多个组件中的数据或者功能很相近时，我们就可以利用mixins将公共部分提取出来，通过 mixins封装的函数，组件调用他们是不会改变函数作用域外部的。
三、如何创建Mixins？
在src目录下创建一个mixins文件夹，文件夹下新建一个myMixins.js文件。前面我们说了mixins是一个js对象，所以应该以对象的形式来定义myMixins，在对象中我们可以和vue组件一样来定义我们的data、components、methods 、created、computed等属性，并通过export导出该对象
myMixins.js：
// myMixins.js
export default {
data () {
return {
num:1
}
},
mounted() {
this.speak();
},
methods: {
speak() {
console.log(this.num);
},
}
}
四、如何在组件中使用Mixins？
在需要调用的组件中引入myMixins.js文件，然后在export default 中引入你需要的对象即可
五、Mixins的特点
（1）方法和参数在各组件中不共享，虽然组件调用了mixins并将其属性合并到自身组件中来了，但是其属性只会被当前组件所识别并不会被共享，也就是其他组件无法从当前组件中获取到mixins中的数据和方法。
① todo.vue：组件1中对num进行+1操作
// todo.vue
// 引入 myMixins.js 文件
import {myMixins} from './myMixins';
export default {
mixins: [myMixins],
data() {
return {}
},
created() {
this.num++
},
}
② list.vue 组件2不进行操作
// list.vue
import {myMixins} from './myMixins';
export default {
mixins: [myMixins],
data() {
return {}
},
}
③ 分别切换到两个页面，查看控制台输出
会发现组件1改变了num里面的值，组件2中num值还是混合对象的初始值，并没有随着组件1的增加而改变
（2）引入mixins后组件会对其进行合并，将mixins中的数据和方法拓展到当前组件中来，在合并的过程中会出现冲突，接下来我们详细了解Mixins合并冲突
六、关于Mixins合并冲突
（1）值为对象(components、methods 、computed、data)的选项，混入组件时选项会被合并，键冲突时优先组件，组件中的键会覆盖混入对象的
① 我们在混入对象增加num属性、getDate1方法和getDate2方法
// myMixins.js
export const myMixins = {
components:{},
data() {
return {
num: 1,
}
},
methods: {
getDate1() {
console.log("num1 from mixins =", this.num )
},
getDate2() {
console.log("num2 from mixins =", this.num )
},
}
}
② 我们在引入了myMixins文件的 todo.vue 组件中，增加num属性、getDate1方法和getDate3方法
// todo.vue
import { myMixins } from "./myMixins.js";
export default {
mixins: [myMixins],
data() {
return {
num: 18,
}
},
mounted() {
this.getDate1();
this.getDate2();
this.getDate3();
},
methods: {
getDate1() {
console.log('num1 from template =', this.num)
},
getDate3() {
console.log('num3 from template =', this.num)
},
}
}
③ 我们会发现，组件中的age覆盖了混合对象的age，todo.vue 组件的getDate1方法覆盖了混合对象的getDate1方法
（2）值为函数(created、mounted)的选项，混入组件时选项会被合并调用，混合对象里的钩子函数在组件里的钩子函数之前调用
myMixins.js 中的console：
// myMixins.js
export const myMixins = {
components:{},
data() {
return {}
},
created() {
console.log('hello from mixin')
}
todo.vue 中的 console
// todo.vue
import { myMixins } from "./myMixins.js";
export default {
mixins: [myMixins],
data() {
return {}
},
created() {
console.log('hello from self')
}
}
控制台打印
七、vue中mixins的使用方法和注意点 (异步请求的情况)
当混合里面包含异步请求函数，而我们又需要在组件中使用异步请求函数的返回值时，我们会取不到此返回值，如下：
Mymixins.js文件中
// myMixins.js
export const myMixins = {
components:{},
data() {
return {
num: 1,
}
},
methods: {
getDate1() {
new Promise((resolve,reject) => {
let a = 1;
setTimeout(() => {
resolve(a)
},500)
}).then(res => {
console.log(res,'res');
return res
})
},
}
}
todo.vue 文件中
// todo.vue
import { myMixins } from "./myMixins.js";
export default {
mixins: [myMixins],
data() {
return {}
},
mounted() {
console.log(this.getDate1,'template1-func_one')
}
}
解决方案：不要返回结果而是直接返回异步函数
Mymixins.js文件中
// myMixins.js
export const myMixins = {
components:{},
data() {
return {
num: 1,
}
},
methods: {
async getDate1() {
let result = await new Promise((resolve,reject) => {
let a = 1;
setTimeout(() => {
resolve(1)
},500)
})
return result
},
}
}
todo.vue 文件中
// todo.vue
import { myMixins } from "./myMixins.js";
export default {
mixins: [myMixins],
data() {
return {}
},
mounted() {
this.getDate1().then(res => {
console.log(res,'template1-res')
})
}
}