vue mixin 的使用

什么是 mixin

mixin 中文是混入的意思，用来分发Vue中的可复用的功能。一个混入对象可以包含任意的组件选项。当组件使用混入对象时，所混入的选项被混入，该组件本身的选项
举例：

//定义一个混入对象
var myMixin = {
created:function(){
this.hello()
  },
methods:{
	hello:function(){
		console.log('hello from mixin!')
	}
 }
}
// 定义一个使用混入对象的组件
var Component = Vue.extend({
	mixins:[myMixin ],
})
var component = new Component() // =>"hello from mixin!"

选项合并

• 钩子函数合并为一个数组，都会被调用，混入对象的钩子函数将在组件自身钩子函数之前调用
  举例：

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

• 数据对象内部合并，已组件数据优先

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

• 值为对象的选项，如methods,components,directives,将会合并同一个对象，两个对象键名冲突时，取组件对象的键值对
  举例：

var mixin = {
 methods:{
  foo:function(){
   console.log('foo')
  },
  save:function(){
  console.log('save')
  }
 }
}

var vm = new Vue({
	mixins:[mixin],
	methods:{
	 bar:function(){
	  console.log('bar')
	 },
	 save:function(){
	  console.log('this is save')
	 }
	}
})
vm.foo()//=>'foo'
vm.save()//=>'this is save'
vm.bar()//=>'bar'

全局混入

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

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

new Vue({
  myOption: 'hello!'
})
// => "hello!"