发布时间:2023-04-22 文章分类:WEB开发, 电脑百科 投稿人:李佳 字号: 默认 | | 超大 打印

什么是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状态管理似乎也是做的这一件事,它也是将组件之间可能共享的数据抽离出来。两者看似一样,实则还是有细微的区别,区别如下:

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中的Mixin混入

什么是Mixin?带你了解Vue中的Mixin混入

上段代码中引入mixin的方法也非常简单,直接使用vue提供给我们的mixins属性:mixins:[mixins]。

通过上面的代码和效果我们可以得出以下几点:

问题提出:

这里我们就提出了一个问题:一个组件中改动了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>

代码解释:

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

总结

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