vue中的混入mixins

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

基础：

// mixin.js
export const mixin = {
	created() {
		this.init()
	},
	methods: {
		init() {
			console.log('created mixin')
		}
	}
}

// 在组件中引入
import { mixin } from './mixins/mixin.js'
export default {
	mixins: [mixin],
}
// => created mixin

合并:

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

1. 数据对象内

   mixin和组件的数据对象在内部会进行递归合并,在发生冲突时以组件数据优先。

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

2. 钩子函数

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

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

3. 值为对象的选项

   例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。

   // mixin.js
   var mixin = {
     	methods: {
       	foo() {
         		console.log('foo')
       	},
       	conflicting() {
         		console.log('from mixin')
       	}
     	}
   }
   
   // 在组件中引入
   var vm = new Vue({
     	mixins: [mixin],
     	methods: {
       	bar() {
         		console.log('bar')
       	},
       	conflicting() {
         		console.log('from self')
       	}
     	}
   })
   
   vm.foo() // => "foo"
   vm.bar() // => "bar"
   vm.conflicting() // => "from self"
   

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

与vuex的区别:

vuex：用来做状态管理的，里面定义的变量在每个组件中均可以使用和修改，在任一组件中修改此变量的值之后，其他组件中此变量的值也会随之修改。

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

与公共组件的区别:

组件：在父组件中引入组件，相当于在父组件中给出一片独立的空间供子组件使用，然后根据props来传值，但本质上两者是相对独立的。

Mixins：则是在引入组件之后与组件中的对象和方法进行合并，相当于扩展了父组件的对象与方法，可以理解为形成了一个新的组件。