Vue | 20 可复用性&组合-混入

内容提要：

基础的混入方式

操作项的合并

全局的混入方式

自定义操作项合并策略

混入是一种非常灵活的分发Vue组件中可复用的功能模块的方式。一个混入对象能包含任何组件操作项。当一个组件使用一个混入对象的时候，在混入对象的所有操作项被‘混合’进组件自己的操作项。

例如：

// 定义一个混入对象
var myMixin = {
    created: function () {
        this.hello()
    },
    methods: {
        hello: function () {
            console.ljog('hello form mixin!')
        }
    }
}

// 定义一个组件使用这个混入
var Component = Vue.extend({
    mixins: [myMixin]
})

var component = new Component() // => "hello from mixin!"

操作项合并

当一个混入和组件本身包含重叠的操作项，它们将被使用恰当的策略合并。

例如，数据对象进行一个浅合并（一层属性深度），在发生冲突时组件的数据优先。

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

相同命名的钩子函数被合并到数组以便调用所有这些函数。在组件自己的钩子被调用之前混入钩子将被调用。

var mixin = {
	created: function () {
		console.log('mixin hook called')
    }
}

new Vue({
    mixins: [mixin],
    created: function () {
		console.log('component hook called')
    }
})

// => "mixin hook called"
// => 'component hook called'

值为对象的选项，例如：methods，components和direcitives，将被合并到同一个对象。在这些对象中，当keys冲突的时候组件选项具有更高的优先级：

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

var vm = new Vue({
    minins: [mixin],
    methods: {
		bar: function () {
			console.log('bar')
        },
        conflicting: function () {
			console.log('from self')
        }
    }
})

vm.foo() // => "foo"
vm.bar() // => "bar" 
vm.conflicting() // => "form self"

在Vue.extend()使用相同的合并策略。

全局混入

你也能够使用一个全局混入，谨慎使用！一旦你使用了一个全局混入，它将影响你之前创建的每一个Vue实例。当使用得当的时候，它可以被用于注入自定义操作的处理逻辑：

// 为‘myOption’自定义操作输入一个处理程序
Vue.mixin({
    created: function () {
        var myOption = this.$options.myOption
        if (myOption) {
            console.log(myOption)
        }
    }
})

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

要节制和小心使用全局混入，因为它会影响你每一个单独创建的Vue实例，包括第三方组件。大多数情况下，你应该像上文的例子一样仅仅在自定义的操作中使用。也可以作为Plugins以避免重复应用。

自定义操作项合并策略

当自定义操作项被合并的时候，他们使用默认的策略复写已经存在的值。如果你想让一个自定义的操作项使用一个自定义的逻辑被合并，你需要附加一个函数Vue.config.optionMergeStrategies:

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

对于大部分基于对象的操作，你能够通过methods使用相同的策略：

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

一个更高级的合并策略例子能够被发现在 Vuex‘s 1.x：

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