vue 选项之混入对象 mixins混入

1.混入 (mixins) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项

在项目mixin目录下新建一个myMixin.js文件

// 定义一个混入对象，(注意是一个对象),可以是任意的组件选项：比如：data(), props, computed, components等
export const myMixin = {
	data(){
		return {
			name: 'zhangsan',
			isMarriage: false
		}
	},
	methods: {
		sayHello(){
			console.log('hello from mixin')
		}
	}
	// 也可以是任意的钩子函数
	created(){
		console.log('hello')
	}
}

把定义的混入对象混入到你需要的组件中

<template>
	组件1
</template>
<script>
import { myMixin } from './myMixin'
export default {
	mixins: [myMixin] // 注意 mixins 是复数, 表示可以混入多个不同的自定义mixin
}
</script>

// 这样混入后你的组件中就有了混入对象中定义的选项了，达到多个组件复用统一套代码的目的

2. 全局混入：
   混入也可以进行全局注册。使用时格外小心！一旦使用全局混入，它将影响每一个之后创建的 Vue 实例。

总结：

1.选项合并：

(1)当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。
(2).同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。
(3).值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。

mixins特点

方法和参数在各组件中不共享

所有混入的到指定组件中的对象选项都将为该组件独立拥有，意味着方法和参数不共享，你在一个组件中执行某个方法，不会影响另一个组件中的该方法。

与Vuex的区别：
vuex：用来做状态管理的，里面定义的变量在每个组件中均可以使用和修改，在任一组件中修改此变量的值之后，其他组件中此变量的值也会同步修改，并且可以追溯修改的来源。

Mixins：可以定义共用的变量，在每个组件中使用，引入组件中之后，各个变量是相互独立的，在当前组件中修改不会影响到其他组件。

与公共组件的区别
组件：在父组件中引入组件，相当于在父组件中给出一片独立的空间供子组件使用，然后根据props来传值，但本质上两者是相对独立的。
mixins：则是在引入组件之后与组件中的对象和方法进行合并，相当于扩展了父组件的对象与方法，可以理解为形成了一个新的组件。