1.什么是Mixin（混入）

首先呢，Mixin并不是vue中独有的，可以说它是一种思想，也就是和它的名字一样就是混入，在现在的众多开发框架中都已经实现了Mixin（混入）

官方解释

：

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

理解解释

：

就是把组件间中一些比较频繁使用的配置与逻辑给提取出来，哪里需要就往哪里混入，这样的话就可以提高代码的复用率，也可以把他理解为组件中的组件，只不过是一些配置与逻辑。

2.Mixin（混入）与vuex的区别

• Vuex公共状态管理，如果在一个组件中更改了Vuex中的某个数据，那么其它所有引用了Vuex中该数据的组件也会跟着变化。
• Mixin中的数据和方法都是独立的，组件之间使用后是互相不影响的。

3.如何使用

（1）定义Mixin

先在src中新建一个mixin文件夹，再建立一个index.js

// src/mixin/index.js
export const mixins = {
  data() {
    return {};
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {},

（2）局部混入

<script>
import { mixins } from "./mixin/index";
export default {
  name: "App",
  mixins: [mixins],
  components: {},
  created(){
    console.log("组件调用minxi数据",this.msg);
  },
  mounted(){
    console.log("我是组件的mounted生命周期函数")
  }
};
</script>

首先，组件中先import，然后mixins: [mixins]调用

（3）全局混入

修改main.js中的代码

import { mixins } from "./mixin/index";
Vue.mixin(mixins);

之后，所有组件都可以使用mixin中的方法

4.命名冲突

（1）生命周期函数

会先执行mixin中生命周期函数中的代码，然后在执行组件内部的代码

（2）data数据冲突

当mixin中的data数据与组件中的data数据冲突时，组件中的data数据会覆盖mixin中数据

（3）方法命名冲突

当mixin中的methods与组件中的methods名字冲突时，会优先调用组件的methods。

5.优缺点

（1）优点

• 提高代码复用性
• 无需传递状态
• 维护方便，只需要修改一个地方即可

（2）缺点

• 命名冲突
• 滥用的话后期很难维护
• 不好追溯源，排查问题稍显麻烦
• 不能轻易的重复代码