Understanding mixins in vuejs

Time:2019-12-2

1. What is mixins?

When you have two very similar components in development, their functions are very similar, but they are slightly different in some parts. Now, your approach is to divide them into two different components? Or just keep one component, and use props to control the partial difference?

These solutions are not perfect. If you divide them into two different components, and the function changes, you must modify them in two places, and this way also violatesDry principle (don’t repeat yourself)。 If you use too many props to control the differences of components, this kind of maintenance will be very complex, which may slow down your development speed.

Dry principle: don’t repeat yourself (dry, or some times do not repeat yourself)
is a principle of software development aimed at reducing repetition of
software patterns,[1] replacing it with abstractions or using data
normalization to avoid redundancy.

Mixins in Vue are basically a block of defined logic, stored by Vue in a specific specified way, which can be used repeatedly to add functions for Vue instances and components. As a result, Vue mixins can be shared among multiple Vue components without repeating code blocks. People who have used CSS preprocessor of SASS should have a good understanding of mixin.

2. Why are mixins important?

  • With Vue mixins, you can easily follow the dry principle in your programming, which ensures that you do not repeat yourself.
  • With Vue mixins, you can also get flexible choices. Mixin objects contain options for Vue components, so mix mixin and component options.
  • Vue mixins are also safe, and if written well, they do not affect changes beyond their definition.
  • They are a great platform for code reusability.

3. Mixins instance

Consolidation rules:

  • Data objects are recursively merged internally, and component data takes precedence in case of conflict.
  • Hook functions with the same name will be merged into an array, so both will be called. In addition, the hook of the object will be called before the hook of the component itself.
  • Options with values of objects, such as methods, components, and directives, are merged into the same object. When two object key names conflict, the key value pairs of component objects are taken.

3.1 local mixins

//toggle.js
export const toggle = {
  data() {
    return {
      "show": false
    }
  },
  methods: {
    changeState() {
      this.show = !this.show;
    }
  }
};
<template>
  <div>
    <div v-show="show">
      <p>Prompt box</p>
    </div>
    <button @click="changeState">click</button>
  </div>
</template>

<script>
import {toggle} from './mixins/toggle'

export default {
  mixins: [toggle]
}
</script>

Operation result:

Understanding mixins in vuejs

3.2 global mixins

<script>
import vue from 'vue'

vue.mixin({
  created() {
    //Custom options
    const myOption = this.$options.myOption;
    if (myOption) {
      //Print if myoption has a value
      console.log(myOption);
    }
  }
})

export default {
  myOption: "hello world!"
}
</script>

Be careful:Use global blending with caution as it affects each individually created instance of Vue, including third-party components. In most cases, only custom options should be applied, as in the example above. It is recommended to publish it as a plug-in to avoid repeated application mixing.

4, summary

All of the things we mentioned here come in handy when building applications that can add complexity. You want to define many reusable functions, or format them in a way that you can reuse across components, so you don’t have to define the same content over and over again.

Recommended Today

ASP.NET Example of core MVC getting the parameters of the request

preface An HTTP request is a standard IO operation. The request is I, which is the input; the responsive o is the output. Any web development framework is actually doing these two things Accept the request and parse to get the parameters Render according to the parameters and output the response content So let’s learn […]