秘辛是什么意思网络用语（什么是Mixin？带你了解Vue中的Mixin混入）
什么是Mixin？本篇文章带大家了解一下Vue中的Mixin混入 ，介绍Mixin和Vuex的区别 ，Mixin的使用方法 ，希望对大家有所帮助！
Vue框架现在基本上已经占据了前端的半壁江山 ，Vue的数据驱动和组件化的思想深入人心 。Vue全家桶可能很多小伙伴都比较熟悉 ，在工作上也用得比较得心应手 。但是今天讲的Vue中这个Mixin的用法我相信还有很多小伙伴不知道或者没有用过 ，或者有些小伙伴接手别人的Vue项目时看到里面有个Mixin文件夹 ，也会用 ，但是一直都是云里雾里的状态 ，今天我们就好好聊聊Mixin ，争取以后不在犯迷糊 。【相关推荐：vuejs视频教程】
1. 什么是Mixin？
官方解释：
混入 (mixin) 提供了一种非常灵活的方式 ，来分发 Vue 组件中的可复用功能 。一个混入对象可以包含任意组件选项 。当组件使用混入对象时 ，所有混入对象的选项将被“混合 ”进入该组件本身的选项 。
民间解释：
将组件的公共逻辑或者配置提取出来 ，哪个组件需要用到时 ，直接将提取的这部分混入到组件内部即可 。这样既可以减少代码冗余度 ，也可以让后期维护起来更加容易 。
这里需要注意的是：提取的是逻辑或配置 ，而不是HTML代码和CSS代码 。其实大家也可以换一种想法 ，mixin就是组件中的组件 ，Vue组件化让我们的代码复用性更高 ，那么组件与组件之间还有重复部分 ，我们使用Mixin在抽离一遍 。
2. Mixin和Vuex的区别？
上面一点说Mixin就是一个抽离公共部分的作用 。在Vue中 ，Vuex状态管理似乎也是做的这一件事 ，它也是将组件之间可能共享的数据抽离出来 。两者看似一样 ，实则还是有细微的区别 ，区别如下：
Vuex公共状态管理 ，如果在一个组件中更改了Vuex中的某个数据 ，那么其它所有引用了Vuex中该数据的组件也会跟着变化 。 Mixin中的数据和方法都是独立的 ，组件之间使用后是互相不影响的 。3. 如何使用？
我们了解了Mixin的概念 ，那么如何使用它呢？这才是我们的重点 。
3.1 准备工作
接下来我们的mixin就放在Vue2.x的脚手架项目中演示 。
利用Vue-cli初始化一个最简单的项目：
3.1 mixin定义
定义mixin也非常简单 ，它就是一个对象而已 ，只不过这个对象里面可以包含Vue组件中的一些常见配置 ，如data 、methods 、created等等 。
在我们的项目src目录下新建mixin文件夹 ，然后新建index.js文件 ，该文件存放我们的mixin代码 。
代码如下：
1
2
3
4
5
6
7
8
9
10
// src/mixin/index.js
export const mixins = {
data() {
return {};
},
computed: {},
created() {},
mounted() {},
methods: {},
};
可以看到我们的mixin非常的简单 ，主要包含了一个Vue组件的常见的逻辑结构 。
接下来让我们在mixin中简单的写点东西 ，代码如下：
export const mixins = {
data() {
return {
msg: "我是小猪课堂",
};
},
computed: {},
created() {
console.log("我是mixin中的created生命周期函数");
},
mounted() {
console.log("我是mixin中的mounted生命周期函数");
},
methods: {
clickMe() {
console.log("我是mixin中的点击事件");
},
},
};
3.2 局部混入
我们的公共mixin定义好后 ，最重要就是如何使用它 。根据不同的业务场景 ，我们可以分为两种：局部混入和全局混入 。顾名思义 ，局部混入和组件的按需加载有点类似 ，就是需要用到mixin中的代码时 ，我们再在组件章引入它 。全局混入的话 ，则代表我在项目的任何组件中都可以使用mixin 。
组件中引入mixin也非常简单 ，我们稍微改造下App.vue组件 。
代码如下：
上段代码中引入mixin的方法也非常简单 ，直接使用vue提供给我们的mixins属性：mixins:[mixins] 。
通过上面的代码和效果我们可以得出以下几点：
mixin中的生命周期函数会和组件的生命周期函数一起合并执行 。 mixin中的data数据在组件中也可以使用 。 mixin中的方法在组件内部可以直接调用 。 生命周期函数合并后执行顺序：先执行mixin中的 ，后执行组件的 。问题提出：
这里我们就提出了一个问题：一个组件中改动了mixin中的数据 ，另一个引用了mixin的组件会受影响吗？
答案是不会的！
我们可以尝试一下：
在src下的components文件夹下新建demo组件 ，代码如下：
1
2
3
4
5
6
7
8
9
10
// src/components/demo.vue
<template>
<div>mixin中的数据：{{ msg }}</div>
</template>
<script>
import { mixins } from "../mixin/index";
export default {
mixins: [mixins],
};
</script>
然后在App.vue组件中引入demo组件 ，代码如下：
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png" />
<button @click="clickMe">点击我</button>
<button @click="changeMsg">更改mixin数据</button>
<demo></demo>
</div>
</template>
<script>
import { mixins } from "./mixin/index";
import demo from "./components/demo.vue";
export default {
name: "App",
mixins: [mixins],
components: { demo },
created() {
console.log("组件调用minxi数据", this.msg);
},
mounted() {
console.log("我是组件的mounted生命周期函数");
},
methods: {
changeMsg() {
this.msg = "我是变异的小猪课堂";
console.log("更改后的msg:", this.msg);
},
},
};
</script>
代码解释：
我们在demo组件中引入了mixin ，且使用了mixin中的msg数据 。 在App.vue中同样引入了mixin ，且设置了点击事件更改msg 点击按钮 ，更改msg ，查看demo组件中显示是否有变化 。可以看到我们在App.vue组件中更改了msg后 ，demo组件显示没有任何变化 ，所以这里我们得出结论：不同组件中的mixin是相互独立的！
总结
mixin给我们提供了方便的同时也给我们带来了灾难 ，所以有很多时候不建议滥用它 ，但是在有些场景下使用它又是非常合适的 ，这就得根据自己来取舍了 。所以在很多时候我们需要考虑用公共组件还是使用mixin 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！