mixin--vue的混入

以下是vue官网对mixin的介绍:

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

选项合并:当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。比如，数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。
同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。

刚开始看的时候,我感觉这个东东和组件好像没有什么区别.然鹅,看了这篇文章后发现我还是太年轻了.下面我们来看看mixins和普通情况下引入组件有什么区别

• 组件在引用之后相当于在父组件内开辟了一块单独的空间，来根据父组件props过来的值进行相应的操作，单本质上两者还是泾渭分明，相对独立。
  父组件 + 子组件 >>> 父组件 + 子组件
• 而mixins则是在引入组件之后，则是将组件内部的内容如data等方法、method等属性与父组件相应内容进行合并。相当于在引入后，父组件的各种属性方法都被扩充了。
  父组件 + 子组件 >>> new父组件

我自己想了下mixin的使用场景:

1. 不同的页面需要使用相同的数据
2. 不同的页面可以使用相同的方法
3. 其他
   以下是我自己写的一个小栗子:

<!--page-a.vue-->
<template>
    <div class="padd50">
        <div>page-a</div>
        <el-date-picker v-model="time" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="left" />
        <el-button @click="commit">提交</el-button>
    </div>
</template>

<script>
    import mixin from './mixin'

    export default {
        name: "page-a",
        mixins: [ mixin ],
        data() {
            return {
                time: '',
                name: '明妃',
            }
        },

        created() {
            console.log('page-a  父组件created钩子后执行')
            console.log(this.name)
            console.log(this.exmap)
        },

        mounted() {
            console.log('page-a  父组件mounted钩子后执行')
        }
    }
</script>

<!--page-b.vue-->
<template>
    <div class="padd50">
        <div>page-b</div>
        <el-date-picker v-model="time" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="left" />
        <el-button @click="commit">提交</el-button>
    </div>
</template>

<script>
    import mixin from "./mixin";

    export default {
        name: "page-b",
        mixins: [ mixin ],
        data() {
            return {
                time: ''
            }
        },

        created() {
            console.log('page-b  父组件钩子后执行')
        }
    }
</script>

// mixin.js
const mixin = {
    data() {
        return {
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                        picker.$emit('pick', [start, end])
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                        picker.$emit('pick', [start, end])
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                        picker.$emit('pick', [start, end])
                    }
                }]
            },
            name: '废柴',
            exmap: 'mixin特有,可以在父组件直接使用',
        }
    },

    methods: {
        commit() {
            console.log("mnxin方法被提交")
        }
    },

    created() {
        console.log('mixin created钩子先执行')
    },

    mounted() {
        console.log('mixin mounted钩子先执行')
    }
}

export default mixin

访问page-a页面,输出如下:

mixin钩子先执行
page-a  父组件钩子后执行
明妃
mixin特有,可以在父组件直接使用
mixin mounted钩子先执行
page-a  父组件mounted钩子后执行

可以看到,如下:

1. mixin钩子和父组件钩子会合并,都会执行
2. mixin钩子先于父组件钩子执行
3. 当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。比如，数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。
4. 值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。