点击上方“IT那活儿”公众号--专注于企业全栈运维技术分享，不管IT什么活儿，干就完了！！！我们经常会看见一个vue项目中有个mxin文件夹，不知所以然，今天我们来聊聊mixin，在今后的项目中能得心应手使用它。什么是mixins？
混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能，一个混入对象可以包含任意组件选项，当我们存在多个组件中的逻辑或者配置，我们就可以利用mixins将公共部分提取出来，通过 mixins封装的函数，且组件调用他们是不会改变函数作用域外部。这样可以减少代码冗余度，有利于后期维护。mixins和vuex的区别？
Vuex公共状态管理，如果在一个组件中更改了Vuex中的某个数据，那么其它所有引用了Vuex中该数据的组件也会跟着变化。Mixin中的数据和方法都是独立的，组件之间使用后是互相不影响的。如何使用mixins？
mixins它就是一个对象，这个对象里面可以包含Vue组件中的一些常见配置，如data、methods、created等等。在我们的项目中新建mixins文件夹，然后新建index.js文件存放mixin代码，可以看到我们的mixin非常的简单，主要包含了一个Vue组件的常见的逻辑结构，代码如下：
局部混入和组件的按需加载有点类似，就是需要用到mixin中的代码时，我们再在组件章引入它，我们在组件中引入mixins文件夹中的index.js文件：一个组件中改动了mixin中的数据，另一个引用了mixin的组件不会受影响，不同组件中的mixin是相互独立的，在src下的components文件夹下新建demo组件，如图：然后在App.vue组件中引入demo组件，代码如下：我们在demo组件中引入了mixin，且使用了mixin中的msg数据，在App.vue中同样引入了mixin，且设置了点击事件更改msg，可以看到我们在App.vue组件中更改了msg后，demo组件显示没有任何变化，所以这里我们得出结论：不同组件中的mixin是相互独立的。
main.js中全局引入mixins,那我们在组件中就不需要再单独应用mixins了，代码如下：注意：谨慎使用全局混入，它会影响每个单独创建的 Vue 实例 (包括第三方组件)，避免重复应用混入。3.1 应用场景
- 你可以将一些通用的功能提取到混入中，如用户认证、日志记录、通知等。
- 你可以将组件中的不同功能点抽离到不同的混入中，增强代码的可维护性和可读性。
- 混入也可以定义生命周期钩子，这些钩子将被合并到使用它们的组件钩子中。
3.2 优点与缺点
- 提升代码复用性，减少代码冗余，维护方便，只需要需改一个地方即可。
- 命名冲突，滥用的话后期很难维护，不好追溯源，排查问题稍显麻烦，不能轻易的重复代码。
