Vue.js 2.x 混入

Vue.js 2.x mixins

混入

混入（mixins）是一种分发vue组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。

Demo源码

例子：

<div id="app">
    <ul>
        <li>a: {{ a }}</li>
        <li>b: {{ b }}</li>
    </ul>
</div>

<script type="text/javascript">
    const myMixin = {
        data() {
            return {
                a: 1
            }
        },
        methods: {
            sayHello() {
                console.log('Hello world!');
            }
        },
        mounted() {
            this.sayHello();
        }
    };

    new Vue({
        el: '#app',
        mixins: [myMixin],
        data() {
            return {
                b: 2
            }
        }
    });

</script>

选项合并

当组件和混入对象有同名选项时，不同的选项将以不同的恰当方式混合。

选项	优先级（最终保留）	方式
数据对象（data）	组件	递归合并
钩子函数	-	都保留，混入对象钩子在组件钩子之前调用
对象（methods/components/directives）	组件	混为一个对象

数据对象（data）

值类型直接按照组件优先进行覆盖。

对象如果键名有重复，按照组件键值优先进行覆盖。

数组直接按照组件的值进行覆盖。

比如：

<div id="app">
    <ul>
        <li>a: {{ a }}</li>
        <li>b: {{ b }}</li>
        <li>c: {{ c }}</li>
        <li>obj.a: {{ obj.a }}</li>
        <li>obj.b: {{ obj.b }}</li>
        <li>obj.c: {{ obj.c }}</li>
    </ul>
    <ul>
        <li v-for="item in arr">{{ item.id }}: {{ item.name }}</li>
    </ul>
    <ul>
        <li v-for="item in arr2">{{ item }}</li>
    </ul>
</div>

<script src="../vendor/vue.js"></script>
<script type="text/javascript">
    const myMixin = {
        data() {
            return {
                a: 1,
                c: 3,
                obj: {
                    a: 1,
                    b: 2
                },
                arr: [
                    { id: 1, name: 'a' },
                    { id: 2, name: 'b' }
                ],
                arr2: [1, 2, 3]
            }
        },
        methods: {
            sayHello() {
                console.log('Hello world!');
            }
        },
        mounted() {
            this.sayHello();
        }
    };

    new Vue({
        el: '#app',
        mixins: [myMixin],
        data() {
            return {
                b: 2,
                c: 4,
                obj: {
                    b: 3,
                    c: 3
                },
                arr: [
                    { id: 2, name: 'b2' },
                    { id: 3, name: 'c' }
                ],
                arr2: [3, 4, 5]
            }
        }
    });
</script>

钩子函数

同名钩子函数将混合为一个数组，因此都将被调用。

混入对象中的钩子函数将在组件自身钩子函数之前被执行。

const myMixin2 = {
    created() {
        console.log('%s created hook!', 'mixin');
    }
};

new Vue({
    mixins: [myMixin2],
    created() {
        console.log('%s created hook!', 'component');
    }
});

// mixin created hook!
// component created hook!

对象选项（methods，components，directives）

将被混合为一个对象，两个对象键名冲突时，取组件对象 的键值对。

watch将被全部保留，且混入对象中的watch先于组件执行。

computed将只保留组件。

<div id="app2">
    <p>{{ r }}</p>
</div>

<script src="../vendor/vue.js"></script>
<script type="text/javascript">
    const myMixin3 = {
        data() {
            return {
                a: 1
            }
        },
        methods: {
            foo() {
                console.log('This is foo');
            },
            bar() {
                console.log('This is bar');
            }
        },
        watch: {
            a(v) {
                console.log('watch value from mixin: %s', v);
            }
        },
        computed: {
            r() {
                return `computed value from mixin: ${ this.a }`;
            }
        }
    };

    const vm = new Vue({
        mixins: [myMixin3],
        el: '#app2',
        data() {
            return {
                b: 2
            }
        },
        watch: {
            a(v) {
                console.log('watch value from component: %s', v + this.b);
            }
        },
        computed: {
            r() {
                return `computed value from component: ${ this.a * this.b }`;
            }
        },
        methods: {
            bar() {
                console.log('This is balabala');
            },
            count() {
                this.a++;
            }
        },
        created() {
            setInterval(() => {
                this.count();
            }, 2000);
        }
    });

    vm.foo(); // This is foo
    vm.bar(); // This is balabala

</script>

全局混入

可以在Vue上进行全局混入，将会影响到所有之后创建的Vue实例，之前的不会影响。

使用时应当像下面的例子一样，只应用于自定义选项，避免影响过多。

Vue.mixin({
	created() {
		const isTrigger = this.$options.trigger;
		if (!isTrigger) return;
		console.log('Global mixin created hook log.');
	}
});

new Vue({
	trigger: true,
	created() {
		console.log('A component after global mixin.');
	}
});

// Global mixin created hook log.
// A component after global mixin.

自定义选项合并策略

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

如果想让自定义选项以自定义逻辑合并，可以通过Vue.config.optionMergeStrategies添加一个函数。

关于Vue.config.optionMergeStrategies。

原文

Last updated by Jehorn 3PM, July 24, 2019