Vue 2.0 混入（Mixins）的学习与了解

概念： 混入（mixins）是一种分发vue组件中可复用功能的非常灵活的方式

            混入的对象可以包含任意的组件选项

            当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项

理解：mixins 是一个JavaScript对象，可以包含组件中的任意选项， 比如Vue 实例中生命周期的各个钩子函数， 也可以是data,    components, methods 或 directives等。 在Vue中，mixins 为我们提供了Vue组件中共用功能的方法。在使用时，将共用功能以对象的方式传入mixins 选项中。当组件使用mixins 对象时，所有mixins对象的选项都将被混入该组件本身的选项。

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

    1. 数据 data 合并：

 //---- 新建mix.js 文件
export const mixOne = {
    data() {
        return {
            msg1: '这是mixOne1的数据',
            msg2: '这是mixOne2的数据',
            msg3: '这是mixOne3的数据'
        }
    }
}

export const mixTwo = {
    data() {
        return {
            msg1: '这是mixTwo1的数据',
            msg2: '这是mixTwo2的数据',
            msg3: '这是mixTwo3的数据'
        }
    }
}

<!--------------- Hello.vue ------------>
// 使用时引入mix 文件
import {mixOne, mixTwo} from './mix';    // 导入混合对象
export default {
        mixins:[mixOne, mixTwo],     // 记得一定要添加 mixins 属性，要求赋值一个数组，意味着可以使用多个混合对象 
        data() {
            return {
                msg1: '这是hello.vue的msg数据',
                hello: '这是hello.vue的hello数据'
            }
        },
        created() {
            console.log( this.$data.msg1);
            console.log( this.$data.msg2);
            console.log( this.$data.msg3);
            console.log( this.$data.hello);
        }
}
 输出结果：这是hello.vue的msg数据
          这是mixTwo2的数据 
          这是mixTwo3的数据
          这是hello.vue的hello数据

         结论：1. 数据对象在内部分进行浅合并（一层属性深度），在和组件的数据发生冲突时， 以组件数据优先;

                    2. 如果 mixins 中的数据与组件中的数据冲突时（例如: msg1）, 以组件数据为优先

                    3. 如果 mixins 中的数据与组件中的数据不冲突，但是与另外的mixins的对象的数据冲

                        突时(例如：msg2）,则根据 引入 mixins的对象的顺序，决定以后加载的为优先；

                    4. 如果mixins 中的数据都不存在冲突，则都会合并到组件数据中。

     2. 钩子函数的合并

          

   <!--------------- mix.js ------------>
                 export const mixOne = {
                       created(){
                              console.log("heyn:  这是mixOne的create ");
                       }
                 }
                export const mixTwo = {
                       created(){
                              console.log("heyn:  这是mixTwo的create ");
                       }
                }

  <!--------------- Hello.vue ------------>
                import {mixOne, mixTwo} from './mix';
                export default {
                        mixins:[mixOne, mixTwo],
                        created() {
                               console.log("heyn：这是hello.vue 的create");
                        }
                 }
                  输出结果：
                          heyn:  这是mixOne的create
                          heyn:  这是mixTwo的create
                          heyn：这是hello.vue 的create

 

         结论：1. 同名钩子函数将混合为一个数组，因此都将被调用

                     2. 混入对象（mixins对象）的钩子将在组件自身钩子之前调用

                     3. 混入对象如果有多个，并且每个都包含同名的钩子函数，则调用顺序依照混入对象的引入顺序执行

    3. 值为对象选项合并

       

<!--------------- mix.js ------------>
                 export const mixOne = {
                        methods:{
                                test(){
                                      console.log("heyn:  这是mixOne的 test");
                                }， 
                                test2(){
                                      console.log("heyn:  这是mixOne的 test2");
                                }
                         }
                 }
  <!--------------- Hello.vue ------------>
                import {mixOne} from './mix';
                export default {
                        mixins:[mixOne],
                        created() {
                               this.test();
                               this.test2();
                        }
                        methods: {
                                test(){
                                      console.log("heyn:  这是hello的 test");
                                },
                        }
                 }
                 输出结果：
                            heyn:  这是hello的 test
                            heyn:  这是mixOne的 test2

        结论：1. 值为对象的选项，例如 methods, components 和 directives，将被混合为同一个对象

                   2.  两个对象键名冲突时，取组件对象的键值对