[Vue] mixin in vue

Mixin mixin in Vue

Introduction

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

Function

The configuration shared by multiple components can be extracted into a mix-in object

It can be understood that: Vue.mixin provides us with a way to mix in Vue instances. After creating a mixed object, our custom methods or variables can be easily mounted on the Vue instance, which brings convenience to our laziness. ;

Problems with mixins

• The source of the variable is unknown, which is not conducive to the reading of the code;
• Using multiple Mixins may cause naming conflicts;
• Mixin and components may have a many-to-many relationship, and the complexity is high;

Mix in features

Mixin can define public variables or methods, but the data in mixin is not shared, that is, the mixin instances in each component are different, they are all separate individuals, and there is no mutual influence; mixin mixes
objects Function options with the same name as functions (for example: beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed) will be recursively merged into an array, and both functions will be executed, but the function with the same name in the mixin will be executed first;
Mixin mixed-in objects whose value is an object (for example: props, data, methods, components) will be replaced with the same-named object in the component, that is, the same-named object in the component will overwrite the same-named object of the mixin mixed-in object

Summarize

mixin: Extract the same logic of multiple components and reuse them;

Use mixin to mix in data: the priority of component data is higher than the data mixed in by mixin;

Use mixin to mix in hooks: first execute the mixin hook, and then execute the hook in the component;

Use mixin to mix in methods: component methods have higher priority than methods mixed in mixin;

Use mixin to mix in custom properties: Component custom properties have a higher priority than mixin custom properties;

Modify priority: configure app.config, use optionMergeStrategies attribute to modify priority;

Local mixin: The usage of local mixin is similar to that of local components. When using local mixin, you need to use mixins declaration;

Global mixin: Global mixin is similar to global components, injected into each component by default, directly available;

Detailed explanation of some features

define mixin

const mixin = {
    
    
    data(){
    
    ....},
    methods:{
    
    ....}

}

Using mixin two methods

Global mixin: Vue.mixin(xxx)

give a chestnut

import mixin from './mixins';
Vue.mixin(mixin)

Partial mixins: mixins:['xxx']

When components and mixins contain options with the same name, those options will be "merged" in an appropriate manner, with the component taking precedence in the event of a conflict.

var mixin = {
    
    
	data: function () {
    
    
		return {
    
    
    		message: 'hello',
            name: 'abc'
    	}
  	}
}

new Vue({
    
    
  	mixins: [mixin],
  	data () {
    
    
    	return {
    
    
      		message: 'minxxxxxxx',
            top: 'asd'
    	}
    },
  	created () {
    
    
    	console.log(this.$data)
    	// log{ message: "minxxxxxxx", name: "abc", top: "def" }
  	}
})

Conclusion : The priority of component data is higher than the data mixed in Mixin

Lifecycle hooks with the same name will be combined into one array, so all will be called. Also, the hooks of the mixin object will be called before the component's own hooks.

var mixin = {
    
    
  	created () {
    
    
    	console.log('混入对象的钩子被调用')
  	}
}

new Vue({
    
    
  	mixins: [mixin],
  	created () {
    
    
    	console.log('组件钩子被调用')
  	}
})

// => "混入对象的钩子被调用"
// => "组件钩子被调用"

Conclusion : Execute the Mixin hook first, and then execute the hook in the component

Use Mixin to mix in methods

var mixin = {
    
    
      methods:{
    
    
                handleClick(){
    
    
                    console.log("mixin handleClick");
                }
            },
}

new Vue({
    
    
  	mixins: [mixin],

    methods:{
    
    
        handleClick(){
    
    
            console.log("handleClick");
        }
    },
})

// => "handleClick"

Conclusion : Component methods have higher priority than methods mixed in Mixin