Introduction and understanding of vue mixin

1. What is mixin

mixin is a class in the object-oriented programming language that provides the implementation of methods. Other classes can access methods of mixin classes without having to be subclasses;

The mixin class is usually used as a functional module and is "mixed" when the function is needed, which is conducive to code reuse and avoids the complexity of multiple inheritance.

Essentially, it is a JS object that can contain any functional options in the component, such as data, components, methods, created, computed, and lifecycle functions.

You only need to pass the shared functions into the mixins option as an object. When the component uses the mixins object, all objects of the mixins object will be mixed into the options of the component itself.

Partial mixing

import mixin1 from './mixin1'
export default {
    // mixins:[mixin1]
}

Global mixing

({
  created: function () {
      ("Global Mix")
    }
})

Note: When the component has the same options as the mixin object, the component's options will override the mixin option when recursively merge; but if the same option is a life cycle hook, it will be merged into an array, first execute the mixin hook, and then execute the component's hook.

2. Use scenarios

In development, it is often encountered that the same or similar code is used in different components, and the functions of these codes are relatively independent;

example

V-show is used to control whether the control element is displayed. If the variables and rules used in both components are the same, the control element display can be encapsulated separately into a file.

middle

<template>
  <div >
    <button @click="show()">modalShow and hide</button>
    <div v-show="isShowing">modalshow</div>
  </div>
</template>
<script>
import mixin1 from './mixin1'
export default {
    mixins:[mixin1]
}
</script>

Tooltip

<template>
  <div >
    <button @click="show()">tooltipShow and hide</button>
    <div v-show="isShowing">tooltipshow</div>
  </div>
</template>
<script>
import mixin1 from './mixin1'
export default {
    mixins:[mixin1],
}
</script>

middle

export default {
    data() {
        return {
            isShowing:true
        }
    },
    methods: {
        show() { 
             = !
        }
    },
}

3. Principle analysis

• priority is given to recursive processing of mixins;
• First iterate over the key in the merge parent, call the mergeField method to merge, and then save it in the variable options;
• Then iterate through the child, merge and fill in the keys that are not in the parent, call the mergeField method to merge, and save it in the variable options;
• MergeField function;
• Merge strategies include: replacement, merge, queue, and overlay;
• The replacement line strategies are: props, methods, inject, and computed;
• The merged strategy is data. Merge and reassign through the set method, which is to replace the old parameter with the same name;
• Queue strategy includes lifecycle functions and watch. The principle is to store the function into a data and then execute it in sequence in a positive order.
• The superposition types include components, directives, and filters, which are superimposed layer by layer through the prototype chain.

4. Understanding of mixin

Answer: Mixin is a class, which is a js file in vue, and its main function is to refer to it as a functional module. Because in a project, different components may have the same functions, such as display and hiding of control elements. If their variables and rules are exactly the same, this function can be extracted separately, placed in, and then introduced, and the same function can be achieved. The methods introduced are also divided into global mixing and local mixing. Local mixing is introduced in each component, and global mixing is introduced in ().

This is the article about this introduction and understanding of vue mixin. For more related vue mixin content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!