mixin和extend的使用

什么是mixin?

mixin的主要功能是vue组件选项的复制，比如A组件和B组件有相同的功能，但是有些功能又不太一样，这时就可以使用mixin实现复用。mixin的主要复用原则如下：

1. 当出现相同的选项时，以内部组件的选项优先 如A组件中引入mixin中的选项,并且data中的变量一致，使用的是组件中的变量

2. 同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。

//组件1中的钩子函数
mixins: [mixin],
created() {
    console.log("组件1");
},

//mixin中的选项
export default {
    created() {
        console.log('mixin')
    },
}

上面打印的依次是mixin、组件1

mixin的使用

组件A、B都有相同的功能，但是组件A、B功能又有些不一样,那么相同功能就可以公用到一个mixin中，例如A、B组件中都有计算组件生存时间的功能，那么就可以使用mixin

//mixin.js文件
export default {
    data() {
        return {
            time: undefined,
        };
    },
    created() {
        console.log('mixin')
        this.time = new Date();
    },
    beforeDestroy() {
        let time = new Date() - this.time;
        console.log(time);
    },
}

    //组件A
import mixin from "../mixins";
export default {
    mixins: [mixin],
    //组件A中的其它功能
};

    //组件B
import mixin from "../mixins";
export default {
    mixins: [mixin],
    //组件B中的其它功能
};

extends的使用

//定义myVue.js
import Vue from "vue";
export default Vue.extend({
    mixins: {
    data() {
        return {
            time: undefined
        };

    },
    created() {
        console.log("mixin");
        this.time = new Date();
    },
    beforeDestroy() {
        let time = new Date() - this.time;
        console.log(time);
    }
}

//在组件中使用
import myVue from "../myVue";
export default {
    extends: myVue,
};