混入 – mixin

混入（mixins）

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

全局注册使用时需要格外小心！一旦使用全局混入，它将影响每一个之后创建的 Vue 实例

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

数据对象

data数据对象发生冲突时以组件数据优先（如果data中的数据同名，会以组件内的为准，不同名会合并生成新的data）

钩子函数（生命周期的钩子函数）

同名钩子函数将合并为一个数组，都将被调用，并且混入对象的钩子将在组件自身钩子之前调用（先执行混入，在执行组件）

值为对象的选项

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

局部混入（按需混入）

<div id="app">{{msg}} {{getMsg()}}</div>
<script src="./js/vue.js"></script>
<script>
    // 定义局部的混入对象
    var mixinObj = {
        data: {
            msg: "今天是个好日子，我们可以学混入了",
        },
        methods: {
            getMsg: function () {
                console.log("123");
            },
        },
    };
    // 创建vue的实例
    new Vue({
        el: "#app",
        data: {
            msg: "rertuiop",
        },
        mixins: [mixinObj],
    });
    // 等同于
    // new Vue({
    //     el: "#app",
    //     data: {
    //         msg: "今天是个好日子，我们可以学混入了",
    //     },
    //     methods: {
    //         getMsg: function () {
    //             console.log("123");
    //         },
    //     },
    // });
</script>

全局混入（强制混入）

// 全局混入
Vue.mixin({
    data: {}
    created: function () {
        var myOption = this.myOption;
        if (myOption) {
            console.log(myOption);
        }
    },
});

new Vue({
    data: {
        myOption: "hello!",
    },
});