vue中mixins的使用方法和注意地方

一、什么是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')})}
}