Vue中mixins的使用方法和注意点

站长

2023年07月23日 02:13 · 阅读数 19

前言

今天讲的是Vue中这个Mixin的用法。我知道很多小伙伴在项目中都已经用过。但个人一直都是云里雾里的状态，今天我们就好好聊聊Mixin，重新整理思路，争取以后不再犯迷糊。

什么是mixin?

想要使用一个事物或者工具，我们首要先了解它是什么，这样我们才好对症下药。
其实Mixin不是Vue专属的，可以说它是一种思想，也可以说它就是混入的意思，在很多开发框架中都实现了Mixin(混入)，我们这里主要讲解的是Vue中的Mixin。
老规矩，先看官方文档。

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

官方的解释通常都是晦涩难懂的，因为要专业和准确嘛！
这个是我目前理解的Vue中的Mixin是什么：
- 将组件的公共逻辑或者配置提取出来，哪个组件需要用到时，直接将提取的这部分混入到组件内部即可。这样既可以减少代码冗余度，也可以让后期维护起来更加容易。
- 这里需要注意的是：提取的是逻辑或配置，而不是HTML代码和CSS代码。其实大家也可以换一种想法：mixin就是组件中的组件，Vue组件化让我们的代码复用性更高，那么组件与组件之间还有重复部分，我们使用Mixin再抽离一遍。

mixins特点

方法和参数在各组件中不共享

如混入对象中有一个 cont:1的变量,在组件A中改变cont值为5，这时候在组件B中获取这个值，拿到的还是1，还是混入对象里的初始值，数据不共享。

值为对象的选项

如methods,components等，选项会被合并，键冲突的组件会覆盖混入对象的，比如混入对象里有个方法A，组件里也有方法A，这时候在组件里调用的话，执行的是组件里的A方法。

值为函数的选项

如created,mounted等，就会被合并调用，混合对象里的钩子函数在组件里的钩子函数之前调用，同一个钩子函数里，会先执行混入对象的东西，再执行本组件的。

与公共组件的区别

组件：在父组件中引入组件，相当于在父组件中给出一片独立的空间供子组件使用，然后根据props来传值，但本质上两者是相对独立的。

mixin和vuex的区别？

mixin：可以定义共用的变量，在每个组件中使用，引入组件中之后，各个变量是相互独立的，值的修改在组件中不会相互影响。
vuex：用来做状态管理的，里面定义的变量在每个组件中均可以使用和修改，在任一组件中修改此变量的值之后，其他组件中此变量的值也会随之修改。

如何使用？

了解Mixin的概念，那么如何使用它呢？这才是我们的重点。

准备工作

接下来我们的mixin就放在Vue2.x的脚手架项目中演示。
利用Vue-cli初始化一个最简单的项目：

Vue中mixins的使用方法和注意点

mixin定义

定义mixin也非常简单，它就是一个对象而已，只不过这个对象里面可以包含Vue组件中的一些常见配置，如data、methods、created等等。

在我们的项目src目录下新建mixin文件夹，然后新建index.js文件(并顺便写点东西)，该文件存放我们的mixin代码。

代码如下：

export const mixin = {
    data() {
        return {
            msg: "我是熊大",
        }
    },
    compured: {},
    beforeCreate() {
        console.log('我是mixins 中的 beforeCreate钩子函数');
    },
    created() {
        console.log("我是 mixins 中的 created 钩子函数");
    },
    mounted() {
        console.log("我是 mixins 中的 mounted 函数");
    },
    methods: {
        clickMe() {
            console.log("我是mixins 中的点击事件");
        }
    },
}

局部混入

我们的公共mixin定义好后，最重要就是如何使用它。根据不同的业务场景，我们可以分为两种：局部混入和全局混入（后续再讲）。顾名思义，局部混入和组件的按需加载有点类似，就是需要用到mixin中的代码时，我们再在组件中引入它。全局混入的话，则代表我在项目的任何组件中都可以使用mixin。

组件中引入mixin也非常简单，我们稍微改造下App.vue组件。

代码如下

<template>
  <div>
    <img src="./assets/logo.png" alt="">
    <button @click="clickMe">点击我</button>
  </div>
</template>

<script>
import { mixin } from './views/mixin'

export default {
  name: 'mixinTest',
  mixins: [mixin],
  props: {},
  data() {
      return { 
        // msg: "我是熊大1",
      }
  }, 
  beforeCreate() {
        console.log('组件的 beforeCreate钩子函数');
  },
  created() {
    console.log('组件的 crtead 钩子函数');
  },
  mounted() {
    console.log('组件的 mounted 钩子函数');
  },
}
</script>

效果如下：
通过上面的代码和效果我们可以得出以下几点：
- mixin中的生命周期函数会和组件的生命周期函数一起合并执行。
- mixin中的data数据在组件中也可以使用。
- mixin中的方法在组件内部可以直接调用。
- 生命周期函数合并后执行顺序：先执行mixin中的，后执行组件的。
问题提出：
- 这里我们就提出了一个问题：一个组件中改动了mixin中的数据，另一个引用了mixin的组件会受影响吗？答案是不会的！我们可以尝试一下：
在src下的components文件夹下新建demo组件，代码如下：

<template>
    <div>mixin中的数据: {{ msg }}</div>
</template>

<script>
import { mixin } from '@/views/mixin';
    export default {
        name: 'demo-test',
        mixins: [mixin]
    }
</script>

Vue中mixins的使用方法和注意点

然后在App.vue组件中引入demo组件，代码如下：

<template>
  <div>
    <img src="./assets/logo.png" alt="">
    <button @click="clickMe">点击我</button>
    <demo />
  </div>
</template>

<script>
import { mixin } from './views/mixin'
import demo from '@/components/demo.vue'

export default {
  name: 'mixinTest',
  mixins: [mixin],
  components: { demo },
  props: {},
  data() {
      return { 
        // msg: "我是熊大1",
      }
  }, 
  beforeCreate() {
        console.log('组件的 beforeCreate钩子函数');
  },
  created() {
    console.log('组件的 crtead 钩子函数');
  },
  mounted() {
    console.log('组件的 mounted 钩子函数');
  },
  methods: {
      clickMe() {
        this.msg = '我是盗版熊大';
        console.log('修改的 msg 值：', this.msg);
      }
  }
}
</script>

代码解释：
- 我们在demo组件中引入了mixin，且使用了mixin中的msg数据。
- 在App.vue中同样引入了mixin，且设置了点击事件更改msg 。
- 点击按钮，更改msg，查看demo组件中显示是否有变化。
效果如下：

Vue中mixins的使用方法和注意点

可以看到我们在App.vue组件中更改了msg后，demo组件显示没有任何变化，所以这里我们得出结论：不同组件中的mixin是相互独立的！

选项合并

上面的例子中我们仔细看会发现一个问题：mixin中定义的属性或方法的名称与组件中定义的名称没有冲突！

那么我们不禁会想，如果命名有冲突了怎么办？我们使用git合并代码的时候经常会有冲突，有冲突了不要怕，我们合并就好了。这里的冲突主要分为以下几种情况：

（1）生命周期函数
- 确切来说，这种不算冲突，因为生命周期函数的名称都是固定的，默认的合并策略如下：先执行mixin中生命周期函数中的代码，然后在执行组件内部的代码，上面的例子其实就很好的证明了。

（2）data数据冲突

当mixin中的data数据与组件中的data数据冲突时，组件中的data数据会覆盖mixin中数据(msg="我是熊大")：

<template>
  <div>
    <img src="./assets/logo.png" alt="">
    {{ msg }}
    <button @click="clickMe">点击我</button>
  </div>
</template>

<script>
import { mixin } from './views/mixin'

export default {
  name: 'mixinTest',
  mixins: [mixin],
  props: {},
  data() {
      return { 
        msg: "我是熊大1",
      }
  }, 
}
</script>

效果如下：

（3）方法冲突

这种冲突很容易遇到，毕竟大家命名方法的名字很容易一样：

<template>
  <div>
    <img src="./assets/logo.png" alt="">
    <button @click="clickMe">点击我</button>
  </div>
</template>

<script>
import { mixin } from './views/mixin'

export default {
  name: 'mixinTest',
  mixins: [mixin],
  props: {},
  data() {
      return { }
  }, 
  methods: {
      clickMe() {
        console.log('我是组件的方法');
      }
  }
}
</script>

小结：
- 当某个组件混入了 mixin 文件之后生命周期函数合并后执行顺序：先执行mixin中的，接着执行组件的
- 当mixin中的data 数据和 method 方法与组件中的相冲突时，优先使用组件中的
- 不同组件引用 mixin中data 数据和 method 方法是相互独立的！

mixin的优缺点

从上面的例子看来，使用mixin的好处多多，但是凡是都有两面性，这里总结几点优缺点供大家参考：

优点

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

缺点

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

总结

mixin给我们提供了方便的同时也给我们带来了灾难，所以有很多时候不建议滥用它，但是在有些场景下使用它又是非常合适的，这就得根据自己来取舍了。所以在很多时候我们需要考虑用公共组件还是使用mixin。

Vue中mixins的使用方法和注意点

前言

什么是mixin?

mixins特点

方法和参数在各组件中不共享

值为对象的选项

值为函数的选项

与公共组件的区别

mixin和vuex的区别？

如何使用？

准备工作

mixin定义

局部混入

选项合并

mixin的优缺点

优点

缺点

总结