7. 生命周期钩子和mixin原理

核心答案:

Vue的生命周期钩子就是回调函数而已，当创建组件实例的过程中会调用对应的钩子方法

#补充回答:

内部主要是使用callHook方法来调用对应的方法。核心是一个发布订阅模式，将钩子订阅好（内部采用数组的方式存储），在对应的阶段进行发布！

#快速Mock:

function mergeHook(parentVal, childValue) {
    if (childValue) {
        if (parentVal) {
            return parentVal.concat(childValue);
        } else {
            return [childValue]
        }
    } else {
        return parentVal;
    }
}
function mergeOptions(parent, child) {
    let opts = {};
    for (let key in child) {
        opts[key] = mergeHook(parent[key], child[key]);
    }
    return opts;
}
function callHook(vm, key) {
    vm.options[key].forEach(hook => hook());
}
function Vue(options) {
    this.options = mergeOptions(this.constructor.options, options);

    callHook(this, 'beforeCreate');
}
Vue.options = {}
new Vue({
    beforeCreate() {
        console.log('before create')
    }
})

源码位置:src/core/util/options.js:146、core/instance/lifecycle.js:336

#5.Vue.mixin的使用场景和原理？

#核心答案:

Vue.mixin的作用就是抽离公共的业务逻辑，原理类似“对象的继承”，当组件初始化时会调用mergeOptions方法进行合并，采用策略模式针对不同的属性进行合并。如果混入的数据和本身组件中的数据冲突，会采用“就近原则”以组件的数据为准。

#补充回答:

mixin中有很多缺陷 "命名冲突问题"、"依赖问题"、"数据来源问题",这里强调一下mixin的数据是不会被共享的！

#快速Mock:

Vue.mixin = function (obj) {
    this.options = mergeOptions(this.options,obj);
}
Vue.mixin({
    beforeCreate(){
        console.log('before create ok')
    }
})

源码位置:src/global-api/mixin:5