Vue2中的mixinmixin是Vue2中比较出彩的用法，最近面试mixin被没少问到过，所以想做一个总结，从多维度上

前言

最近面试mixin被没少问到过，所以想做一个总结，从多维度上去理解mixin。

mixin

先看下Vue2官网的解释：

个人理解：可以把多个组件共用的配置提取成一个混入对象。
使用步骤：

定义混合

export const mixin = {
    methods: {
        showName(){
            alert(this.name)
        }
    },
    mounted() {
        console.log('hi')
    },
}

使用混入：

全局混入：Vue.mixin(xxx)（在main.js中）

局部混入：mixins:['xxx'](在.vue文件中)

mixin的选项合并（核心概念）

什么是选项合并：

（面试问题）当组件和混⼊对象含有同名选项时，这些选项将以恰当的⽅式进⾏“合并”。

1.混入的数据存在冲突时

数据对象在内部会进⾏递归合并，并在发⽣冲突时以组件数据优先。

var mixin = {  
    data: function () {  
        return {  
        message: 'hello',  
        foo: 'abc'  
        }  
    }  
}  
  
new Vue({  
    mixins: [mixin],  
    data: function () {  
    return {  
        message: 'goodbye',  
        bar: 'def'  
        }  
    },  
    created: function () {  
        console.log(this.$data)  
        // => { message: "goodbye", foo: "abc", bar: "def" }  
    }  
})

2.混入的生命周期存在冲突时

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

var mixin = {  
    created: function () {  
        console.log('混入对象的钩子被调用')  
    }  
}  
  
new Vue({  
    mixins: [mixin],  
    created: function () {  
        console.log('组件钩子被调用')  
    }  
})  
  
// => "混入对象的钩子被调用"  
// => "组件钩子被调用"

3.混入的方法存在冲突时

值为对象的选项，将被合并为同一个对象。例如 methods、components 和 directives。

两个对象键名冲突时，取组件对象的键值对。（2个同名的方法，取组件内的而不是mixins中的）

var mixin = {  
    methods: {  
        foo: function () {  
            console.log('foo')  
        },  
        conflicting: function () {  
            console.log('from mixin')  
        }  
    }  
}  
  
var vm = new Vue({  
    mixins: [mixin],  
    methods: {  
        bar: function () {  
            console.log('bar')  
        },  
        conflicting: function () {  
            console.log('from self')  
        }  
    }  
})  
  
vm.foo() // => "foo"  
vm.bar() // => "bar"  
vm.conflicting() // => "from self"

全局混入

可以点击👆标签查看官网的解释，说的很详细了。懒得跳的小伙伴往👇看，全局引入本人的话不是很常用，会存在各式各样的问题，比如匿名引入，导致维护不方便等。

（官网）混入也可以进行全局注册。使用时格外小心！一旦使用全局混入，它将影响每一个之后创建的 Vue 实例。使用恰当时，这可以用来为自定义选项注入处理逻辑。

// 为自定义的选项 'myOption' 注入一个处理器。  
Vue.mixin({  
    created: function () {  
        var myOption = this.$options.myOption  
        if (myOption) {  
            console.log(myOption)  
        }  
    }  
})  
  
new Vue({  
    myOption: 'hello!'  
})  
// => "hello!

请谨慎使用全局混入，因为它会影响每个单独创建的 Vue 实例 (包括第三方组件)。大多数情况下，只应当应用于自定义选项，就像上面示例一样。推荐将其作为插件发布，以避免重复应用混入。

Vue3中为什么不再使用mixin了？（缺点）

（面试问题）

命名冲突
依赖不透明
不好维护，出现问题不好排查

看一段代码就明白了

//mixin.js中
export const hunhe = {
        data() {
		return {
			name:'社会大学',
		}
	},
	methods: {
		showName(){
			alert(this.name)
		}
	},
	mounted() {
		console.log('你好啊！')
	},
}

//xx.vue中
<template>
	<div>
		<h2 @click="showName">学校名称：{{name}}</h2>
		<h2>学校地址：{{address}}</h2>
	</div>
</template>

<script>
	// import {hunhe} from '../mixin' //mixin局部使用的方法
	export default {
		name:'School',
		data() {
			return {
				name:'xxx',
			}
		},
		// mixins:[hunhe], //mixin局部使用的方法
	}
</script>

问题1：如果我想学校名称是社会大学，为什么现在显示为xxx?

命名冲突，我在mixin中定义了一个变量name，又在页面中定义了一个变量name，由于选择合并的概念使用了页面中的变量name

问题2：address,showName哪里来的？

依赖不透明,如果我使用了局部混入import {hunhe} from '../mixin',mixins:[hunhe],还知道文件位置，全局的话我需要去main.js中去寻找，而且变量address和方法showName混入后直接使用，不知道从哪里来的。从而导致了维护的困难。

Vue3中的解决办法

使用自定义hook函数代替它解决上述问题（说白了就是个函数）

<template>
	<h2>我是Test组件</h2>
	<h2>当前点击时鼠标的坐标为：x：{{point.x}}，y：{{point.y}}</h2>
</template>
<script>
	import usePoint from '../hooks/usePoint'
	export default {
		name:'Test',
		setup(){
			const point = usePoint()
			return {point}
		}
	}
</script>

总结

在Vue2中，mixins(局部引入)使用得当还是一个相当不错的帮手，比如说后端给我们返回一个性别1-男，2-女，我们就可以封装一个公共方法供给我们自己使用。