What are Mixins? Take you to understand Mixin in Vue

What are Mixins? This article takes you to understand the Mixin in Vue , introduces the difference between Mixin and Vuex, and how to use Mixin. I hope it will be helpful to you!

---

The Vue framework has basically occupied half of the front-end, and Vue's data-driven and componentized ideas are deeply rooted in the hearts of the people. Many friends may be familiar with the Vue family bucket, and it is more handy to use it at work. But the usage of this Mixin in Vue that I talked about today, I believe that there are still many friends who don’t know or have never used it, or some friends see a Mixin folder in it when they take over other people’s Vue projects, and they will use it, but they always use it. It’s a cloudy state, so let’s talk about Mixin today, so as not to be confused in the future. [Related recommendation: vuejs video tutorial ]

---

1. What are mixins?

Official explanation:

Mixins provide a very flexible way to distribute reusable functionality in Vue components. A mixin object can contain arbitrary component options. When a component uses a mixin, all of the mixin's options will be "mixed in" into the component's own options.

---

Civil explanation:

Extract the common logic or configuration of the component. When which component needs to be used, just mix the extracted part into the component. This can not only reduce code redundancy, but also make later maintenance easier.

What needs to be noted here is that what is extracted is logic or configuration, not HTML code and CSS code. In fact, you can also change your mind. Mixin is a component in a component. Vue componentization makes our code more reusable. Then there are duplicate parts between components. We use Mixin to extract it again.

2. What is the difference between Mixin and Vuex?

The above point says that Mixin is a function of extracting the public part. In Vue, Vuex state management seems to do the same thing, and it also extracts the data that may be shared between components. The two seem to be the same, but in fact there are still subtle differences, the differences are as follows:

• Vuex public state management, if a certain data in Vuex is changed in a component, all other components that reference the data in Vuex will also change accordingly.
• The data and methods in Mixin are independent, and the components do not affect each other after use.

---

3. How to use it?

We understand the concept of Mixin, so how to use it? That's our focus.

---

3.1 Preparations

Next, our mixin will be demonstrated in the Vue2.x scaffolding project.

Initialize the simplest project with Vue-cli:

3.1 mixin definition

It is also very simple to define mixin, it is just an object, but this object can contain some common configurations in Vue components, such as data, methods, created, etc.

Create a new mixin folder in our project src directory, and then create a new index.js file, which stores our mixin code.

code show as below:

// src/mixin/index.js
export const mixins = {
  data() {
    return {};
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {},
};

You can see that our mixin is very simple, mainly including a common logical structure of a Vue component.

Next, let's simply write something in the mixin, the code is as follows:

export const mixins = {

  data() {

    return {

      msg: "我是小猪课堂",

    };

  },

  computed: {},

  created() {

    console.log("我是mixin中的created生命周期函数");

  },

  mounted() {

    console.log("我是mixin中的mounted生命周期函数");

  },

  methods: {

    clickMe() {

      console.log("我是mixin中的点击事件");

    },

  },

};

3.2 Partial mix-in

After our public mixin is defined, the most important thing is how to use it. According to different business scenarios, we can divide them into two types: local mix-in and global mix-in. As the name suggests, partial mixing is similar to on-demand loading of components, that is, when we need to use the code in mixin, we will introduce it in the component chapter. If it is mixed in globally, it means that I can use mixin in any component of the project.

It is also very simple to introduce mixin into the component. Let's slightly modify the App.vue component.

code show as below:

The method of introducing mixin in the above code is also very simple, directly using the mixins property provided by vue: mixins:[mixins].

Through the above code and effect, we can draw the following points:

• The lifecycle functions in the mixin will be merged and executed with the lifecycle functions of the components.
• The data data in the mixin can also be used in the component.
• The methods in the mixin can be called directly inside the component.
• Execution sequence after life cycle functions are merged: first execute the mixin, then execute the component.

Questions raised:

Here we ask a question: If the data in the mixin is changed in one component, will another component that references the mixin be affected?

The answer is no!

We can try it out:

Create a new demo component under the components folder under src, the code is as follows:

// src/components/demo.vue
<template>
  <div>mixin中的数据：{ { msg }}</div>
</template>
<script>
import { mixins } from "../mixin/index";
export default {
  mixins: [mixins],
};
</script>

Then introduce the demo component in the App.vue component, the code is as follows:

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

Code explanation:

• We introduced the mixin in the demo component, and used the msg data in the mixin.
• Mixin is also introduced in App.vue, and the click event is set to change msg
• Click the button, change the msg, and check whether there is any change in the display of the demo component.

It can be seen that after we changed the msg in the App.vue component, the demo component showed no change, so here we conclude that the mixins in different components are independent of each other!

Summarize

While mixin provides us with convenience, it also brings us disasters, so it is not recommended to abuse it in many cases, but it is very appropriate to use it in some scenarios, so you have to choose according to yourself. So in many cases we need to consider whether to use public components or use mixin.