可复用性&组合---（混入mixin）

基础

混入（mixin）：
作用： 提供了一种非常灵活的方式，来分发Vue组件中的可复用功能。
使用形式：

1. 定义一个混入对象（一个混入对象可以包含任意组件选项，比如data，methods…）。
2. 当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项

注释： （当组件的选项和混入对象的选项有重复时，Vue给出了几个决策机制（决定相应选项如何合并））

eg :

//定义一个混入对象

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

选项合并

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

1. 数据对象的合并和发生冲突时的决策机制

eg : 数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先

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）的合并

将被合并为同一个对象，两个对象的键名发生冲突时，取组件对象的键值对

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.extend() 也使用同样的策略进行合并

全局混入

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

eg :

//为自定义选项 ： ‘myOption’注入一个处理器
//全局注册混入
Vue.mixin ({
	created : function () {
		var myOption = this.options.mOption
		if (myOption) {
			console.log(myOption)
		}
	}
})

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

小贴士：

vm.$options

• 类型： object
• 只读
• 详细：用于当前Vue实例的初始化选项。需要在选项中包含自定义property时会有用处：

new Vue({
	customOption : 'foo',
	created: function () {
	console.log(this.$options.customOption)// => 'foo'
 }
})

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

自定义选项合并策略

自定义选项将使用默认策略，即简单的覆盖已有值。

如果想让自定义选项以自定义的逻辑合并，可以向vue.config.optionMergeStrategies添加一个函数：
**eg: **

Vue.config.optionMergeStrategies.myOption = function (toVal,fromVal){
	//返回合并之后的值
}

对于数值为对象的选项

可以使用与methods 相同的合并策略：

var strategies = Vue.config.optionMergeStrategies
strategies.myOption=strategies.methods

一个更高级的例子：

const merge = Vue.config.optionMergeStrategies.computed
Vue.config.optionMergeStrategies.vuex = function (toVal, fromVal) {
  if (!toVal) return fromVal
  if (!fromVal) return toVal
  return {
    getters: merge(toVal.getters, fromVal.getters),
    state: merge(toVal.state, fromVal.state),
    actions: merge(toVal.actions, fromVal.actions)
  }
}