vue-混入mixins

简单介绍

分发Vue组件中的可复用功能。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。(简单的来说就是两个组件合并为一个组件，A混入B形成了全新的组件C)

单纯组件引用：父组件+子组件 => 父组件 + 子组件
        混入mixins：父组件+子组件 => new 父组件（data、methods等方法合并，相当于扩充了父组件的各种属性）
        注意：在使用mixins时，父子组件同时拥有子组件的各种属性方法，但是他们不会共享处理变量，除了合并，没有任何通信。

选项合并

(1) 钩子函数合并：同名钩子函数将混合为一个数组，因此都将被调用。但是混入对象的钩子函数在组件自身钩子函数之前调用。

const myMixins = {
    created() {
        console.log('hello myMixins');
    }
}

const app = Vue.createApp({
    mixins: [myMixins],
    created() {
        console.log('hello myApp');
    }

}).mount('#app');

// 先后输出：hello myMixins  hello myApp

(2) 数据对象合并：data选项中同名数据对象会进行递归合并，并在发生冲突时以组件数据优先。

const myMixins = {
    data() {
        return {
            message: 'hello myMixins',
            foo: 'aaa'
        }
    }
}

const app = Vue.createApp({
    mixins: [myMixins],
    data() {
        return {
            message: 'hello app',
            bar: 'bbb'
        }
    }
}).mount('#app');

// 输出data为：{ message: "hello app", foo: "aaa", bar: "bbb" }

(3) 当值为对象的选项，比如methods、components、directives，将被合并为同一个对象。两个对象键名冲突，取组件对象的键值对

const myMixins = {
    methods: {
        foo() {
            console.log('mixins');
        }
    }
}

const app = Vue.createApp({
    mixins: [myMixins],
    methods: {
        foo() {
            console.log('app self');
        }
    }
}).mount('#app');

app.foo() // app self

局部混入

在相应文件夹建立mixins.js文件，里面写公共复用代码，然后在组件中直接引入设置mixins   

全局混入

app.mixins 使用要格外小心，一旦使用全局混入，将影响每一个之后创建的组件