【Vue】Mixin相关问题解析

0 前言

本文将回答三个问题：是什么、为什么、注意点。
即Mixin是什么怎么用，为什么要用它什么时候用，其他应当注意的问题。

1 是什么

Mixin是什么？
Mixin就是“混入”、“混合”，是一个对象，在组件中使用，可以将一部分对象选项“混入”到另一个对象中，从而实现可复用。

如下代码：

//Student.vue
<template>
	<div>
		<h2 @click="showName">学生姓名：{{name}}</h2>
	</div>
</template>

<script>
	import {hunhe} from '../mixin'
	export default {
		name:'Student',
		data() {
			return {
				name:'张三',
			}
		},
		mixins:[hunhe]
	}
</script>

//mixin.js
export const hunhe = {
	methods: {
		showName(){
			alert(this.name)
		}
	},
	data() {
		return {
			x:100,
			y:200
		}
	},
	mounted() {
		console.log('你好啊！')
	},
}

即可实现把mixin.js中的代码“混入”到Student.vue中去了。
显而易见的是，mixin可以混入data、methods也能混入生命周期函数。

2 为什么

为什么要用Mixin？
其实在是什么中也提到了，mixin是一种常用的、简单的可以提高组件可复用的方式，它在Vue2、Vue3中都可以使用。
当两个组件的数据、方法、钩子函数相似的时候，就可以使用Mixin来降低重复代码。
它的优点在于简单，所以可以常用。
它的缺点在于简单，所以无法实现复杂的代码复用，比如需要根据传入参数的不同来复用不同的代码的场景下，实现起来就比较困难不够优雅。
并且Mixin在冲突的处理方式和引入的处理方式上也有一些需要注意的点，详见下文。

3 注意点

1. 关于冲突。

    - 代码执行过程中，Mixin是先引入与执行的。
    - data(property)冲突：Mixin先引入执行，组件内data后执行，会覆盖Mixin引入的内容。
    - methods/components/directives（对象）冲突：同上，以组件内为准。
    - 生命周期钩子冲突：保留两者，Mixin先执行，组件内后执行。
   

2. 关于使用。

    - 可以组件内引入Mixin
    - 可以全局Mixin（极不推荐，会影响每一个创建的组件）
    - 可以自定义选项合并策略（请看官方文档）
   

3. 使用场景。

    - 主要场景，上文“为什么”已经提及了。
    - 在Vue2中Mixin还是经常被使用的，但是受限于其本身的简单性以及容易出现冲突，所以在Vue3中并不十分推荐。
    - 因为Vue3中有组合式API（Composition Api）。
    - 在Vue3官方文档中，依然保留了Mixin（不像Filter直接被删除了），但文档也推荐使用Composition Api。
   

4 参考资料

官方文档 Mixin
尚硅谷Vue2.0+Vue3.0（Mixin）

5 扩展阅读

【Vue】Vue2，Vue3 学习笔记
【Vue】过滤器Filter
【Vue】Mixin相关问题解析
【Vue】初识Composition Api
【Vue】defineProperty与数据代理