【Vue】vue中的mixin混入

Vue中的mixin混入

简介

混入（mixin）提供了一种非常灵活的方式，来分发 Vue
组件中的可复用功能。一个混入对象可以包含任意组件选项（如data、methods、mounted等等）。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

功能

可以把多个组件共用的配置提取成一个混入对象

可以理解是：Vue.mixin给我们提供了一种混入Vue实例的方法，创建了混入对象之后，我们自定义的方法或者变量可以很轻松的挂载在Vue实例上，给我们的偷懒带来方便；

mixin存在的问题

• 变量来源不明，不利于代码的阅读；
• 使用多个Mixin可能会造成命名冲突；
• Mixin和组件可能会出现多对多关系，复杂度较高；

混入特性

mixin可以定义公用的变量或方法，但是mixin中的数据是不共享的，也就是每个组件中的mixin实例都是不一样的，都是单独存在的个体，不存在相互影响的；
mixin混入对象值为函数（例如：beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,beforeDestroy,destroyed）的同名函数选项将会进行递归合并为数组，两个函数都会执行，只不过先执行mixin中的同名函数；
mixin混入对象值为对象（例如：props,data,methods,components）的同名对象将会进行替换，都优先执行组件内的同名对象，也就是组件内的同名对象将mixin混入对象的同名对象进行覆盖

总结

mixin： 将多个组件相同的逻辑，抽离出来复用；

使用mixin混入data： 组件 data 优先级高于 mixin混入的 data;

使用mixin混入钩子： 先执行 mixin的钩子，再执行组件里的钩子；

使用mixin混入方法: 组件 methods方法 优先级高于 mixin混入的 methods方法；

使用mixin混入自定义属性： 组件自定义属性优先级高于 mixin混入的 自定义属性；

修改优先级： 配置app.config，使用optionMergeStrategies属性修改优先级；

局部mixin： 局部Mixin和局部组件的用法类似，局部mixin在使用时，需要使用mixins声明；

全局mixin： 全局mixin类似于全局组件，默认注入每一个组件里，直接可用；

部分特性详解

定义混入

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

}

使用混入两种方法

全局混入：Vue.mixin(xxx)

举个栗子

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

局部混入：mixins:[‘xxx’]

组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”，在发生冲突时以组件优先。

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" }
  	}
})

结论：组件 data 优先级高于 Mixin 混入的 data

同名生命周期钩子将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。

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

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

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

结论：先执行 Mixin 的钩子，再执行组件里的钩子

使用Mixin混入方法

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

new Vue({
  	mixins: [mixin],

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

// => "handleClick"

结论：组件 methods方法 优先级高于 Mixin 混入的 methods方法