彻底搞懂Vue中的Mixin混入

1. 什么是Mixin？

其实Mixin不是Vue专属的，可以说它是一种思想，通俗点讲就是混入，在很多开发框架中都实现了Mixin(混入)，我们这里主要讲解的是Vue中的Mixin。

大白话解释：
将组件的公共逻辑或者配置提取出来，哪个组件需要用到时，直接将提取的这部分混入到组件内部即可。这样既可以减少代码冗余，也便于后期维护。

2. Mixin和Vuex的区别？

看到Mixin的解释后，似乎Vuex状态管理似乎也是做的这一件事，它也是将组件之间可能共享的数据抽离出来，不过两者还是有区别的

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

3. Mixin的使用

1. 先在src下定义一个minxin文件，可以在几个钩子函数内定义一些数据

  data() {
    return {}
  },
  computed: {},
  created() {
    console.log("我是mixin中的created生命周期函数");
  },

2.局部混入
直接使用vue提供给我们的mixins属性：mixins:[mixins]。

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

效果如下：

通过上面的代码和效果我们可以知道：

• mixin中的函数会和组件的函数会一起合并执行。
• 生命周期函数合并后执行顺序：先执行mixin中的，后执行组件的。

3.全局混入

这个就很简单啦~先全局把它注册好，这样我们就可以在任何组件中直接使用了

不过 Vue3中的Composition API可以代替Mixins
详情点击哈~