vue mixin

The meaning of mixins

mixins (mixed in), the official description is a very flexible way to distribute reusable functions in Vue components, mixins is a js object, which can contain any function options in the script item in our components, such as data, components, methods, created, computed, etc. We only need to pass the common function into the mixins option in the form of an object. When the component uses the mixins object, all the options of the mixins object will be mixed into the options of the component itself, which can improve the reusability of the code and make you The code is kept clean and easy to maintain.

 When to use Mixins?

When we have data or functions in multiple components that are very similar, we can use mixins to extract the common parts. Through the functions encapsulated by mixins, components calling them will not change the outside of the function scope

 How to create Mixins?

Create a mixins folder in the src directory, and create a new myMixins.js file under the folder. We said earlier that mixins is a js object, so myMixins should be defined in the form of an object. In the object, we can define our data, components, methods, created, computed and other attributes in the same way as vue components, and export them through export object

export default {
  data（）{
    return { }
  }
  watch: { },
  beforeMount() { },
  beforeDestroy() { },
  mounted() { },
  methods: { }
}

 How to use Mixins?

Introduce the myMixins.js file in the component that needs to be called, and then introduce the object you need in export default

<script>
  import Mixin from './mixin/index'
  export default { 
    components: { },
    mixins: [Mixin],
  }
</script>

 Features of Mixins:

1. Methods and parameters are not shared among components. Although a component calls mixins and merges its properties into its own components, its properties will only be recognized by the current component and will not be shared, that is, other components cannot Get the data and methods in mixins from the current component

2. After the mixins are introduced, the components will merge them, and the data and methods in the mixins will be extended to the current component. There will be conflicts during the merging process. Next, we will learn more about the mixins merge conflicts

Mixins merge conflicts 

1. For options whose value is an object (components, methods, computed, data), the options will be merged when the component is mixed in. When the key conflicts, the component will be given priority, and the key in the component will override the mixed object

2. The option whose value is a function (created, mounted) will be combined and called when the component is mixed in. The hook function in the mixed object is called before the hook function in the component

 The difference between mixins and vuex

vuex: It is used for state management. The variables defined in it can be used and modified in each component. After modifying the value of this variable in any component, the value of this variable in other components will also be modified accordingly.

Mixins: Common variables can be defined and used in each component. After being introduced into the component, each variable is independent of each other, and the modification of the value will not affect each other in the component.

 The difference between Mixins and public components

Component : Introducing a component in the parent component is equivalent to giving an independent space in the parent component for the child component to use, and then passing values ​​according to props, but the two are relatively independent in essence.

Mixins: After the component is introduced, it is merged with the objects and methods in the component, which is equivalent to extending the objects and methods of the parent component, which can be understood as forming a new component