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 导出该对象。

四、如何使用Mixins

在需要调用的组件中引入 myMixins.js 文件，然后在 export default 中引入需要的对象即可。

五、Mixins的主要特性

1.方法和参数在不同的组件中不共享

当某一个组件调用了 mixins 并将其属性合并到自己组件中，其属性只会被当前这个组件所识别，也就是说其他组件无法从当前组件中获取到 mixins 中的数据和方法，做到了很好的数据隔离效果。如下所示：

// 在 myMixins.js 中定义一个 age 字段和 getAge 方法,用来获取年龄信息

export const myMixins = {
  data() {
    return {
      age: 18,
    }
  },
  mounted() {
    this.getAge()
  },
  methods: {
    getAge() {
      console.log(this.age)
    }
  }
}

// 在第一个组件中引入 mixins，并且对 age 加1 

import { myMixins } from "@/mixins/myMixins.js";
export default {
  mixins: [myMixins],
  data() {
    return {}
  },
  created() {
    this.age++
  },
}

// 发现控制台输出 19，说明当前组件的 age 变化了 

// 在第二个组件中引入 mixins，但是不做任何处理

import { myMixins } from "@/mixins/myMixins.js";
export default {
  mixins: [myMixins],
  data() {
    return {}
  },
}

// 发现控制台输出 18，说明当前组件的 age 无影响

2.Mixins 合并冲突

当 mixins 的值为对象(components、methods 、computed、data)，混入到某个组件中时，选项会被合并。当对象名称冲突时优先组件，组件中的值会覆盖混入对象的。

// 混入myMixins.js对象中增加age属性、getAge1方法、getAge2方法

export const myMixins = {
  components:{},
  data() {
    return {
      age: 18,
    }
  },
  methods: {
    getAge1() {
      console.log("age1 from mixins", this.age )
    },
    getAge2() {
      console.log("age2 from mixins", this.age )
    },
  }
}

// 组件中自带age属性、getAge1方法、getAge3方法；同时引入 mixins。

import { myMixins } from "@/mixins/myMixins.js";
export default {
  mixins: [myMixins],
  data() {
    return {
      age: 20,
    }
  },
  mounted() {
    this.getAge1();
    this.getAge2();
    this.getAge3();
  },
  methods: {
    getAge1() {
      console.log('age1 from template', this.age)
    },
    getAge3() {
      console.log('age3 from template', this.age)
    },
  }
}

// 输出控制台发现，组件中的age覆盖了混合对象的age，组件的getAge1方法覆盖了混合对象的getAge1方法
// age1 from template 20
// age2 from mixins 20
// age3 from template 20

当值为函数(created、mounted)的选项，混入到组件中时，选项会被合并调用，混合对象里的钩子函数在组件里的钩子函数之前调用。

// myMixins.js
export const myMixins = {
  components:{},
  data() {
    return {}
  },
  created() {
    console.log('data from mixins')
  }
}

// 组件中引入 mixins
import { myMixins } from "@/mixins/myMixins.js";
export default {
  mixins: [myMixins],
  data() {
    return {}
  },
  created() {
    console.log('data from template')
  }
}

// 先输出混入对象的值，再输入组件的值
// data from mixins
// data from template

六、mixins 中有异步请求的情况

当混入里面包含异步请求函数，而我们又需要在组件中使用异步请求函数的返回值时，我们会取不到此返回值，解决方案是：不要返回结果，而是直接返回异步函数

// 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
    },
  }
}

// 组件中获取混入的异步函数，通过then 方法获取函数值。

import { myMixins } from "./myMixins.js";
export default {
  mixins: [myMixins],
  data() {
    return {}
  },
  mounted() {
    this.getDate1().then(res => {
      console.log(res)
    })
  }
}

七、与 vuex 的区别

vuex：  用来做状态管理，vuex中定义的变量在每个组件中均可以使用和修改，在任一组件中修改此变量的值之后，其他组件中此变量的值也会随之修改。相当于所有组件共享。

Mixins：  可以定义共用的变量，在每个组件中使用，引用组件中之后，各个变量是相互独立的，值的修改在组件中不会相互影响。组件直接使用是相互隔离的，数据互不影响。

八、与公共组件的区别

组件： 在父组件中引入组件，相当于在父组件中给出一片独立的空间供子组件使用，然后根据 prop 来传值，但本质上两者是相对独立的。

Mixins： 在引入组件之后与组件中的对象和方法进行合并，相当于扩展了父组件的对象与方法，可以理解为形成了一个新的组件。