mixin-混入

Sat, 05 Oct 2024 00:00:00 +0800

1. 什么是Mixin？

想要使用一个事物或者工具，我们首要先了解它是什么，这样我们才好对症下药。

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

老规矩，先看官方文档。

官方解释：

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

官方的解释通常都是晦涩难懂的，因为要专业和准确嘛！

我们可以用我们自己容易理解的话来说说Vue中的Mixin是什么。

民间解释：

将组件的公共逻辑或者配置提取出来，哪个组件需要用到时，直接将提取的这部分混入到组件内部即可。这样既可以减少代码冗余度，也可以让后期维护起来更加容易。

这里需要注意的是：提取的是逻辑或配置，而不是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代码。

代码如下：

// 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。