Vue Function Api 是怎么实现的

github.com/vuejs/vue-f…

这里只拿 onMounted 举例

// 模拟 Vue 生命周期实现
let vm = null;
const Vue = {
    beforeCreate() {
        vm = this;
        this.setup();
    },
    $mount() {
        this.callback();
    }
};

// 模拟 Function Api
function onMounted(callback) {
    vm.callback = callback;
}

// 模拟组件a定义
const a = {
    // 模拟继承, 表示a为Vue实例
    ...Vue,
    setup() {
        onMounted(() => {
            console.log('组件a初始化完成回调');
        });
    }
}

// 模拟组件b定义
const b = {
    // 模拟继承, 表示b为Vue实例
    ...Vue,
    setup() {
        onMounted(() => {
            console.log('组件b回调');
        });
    }
}

// 模拟组件a初始化
a.beforeCreate();
// 使用 setTimeout 模拟组件异步初始化, 且时长不一致
setTimeout(() => {
    console.log('组件a初始化完成');
    a.$mount();
}, Math.random() * 1000);

// 模拟组件b初始化
console.log('组件b开始初始化');
b.beforeCreate();
// 使用 setTimeout 模拟组件异步初始化, 且时长不一致
setTimeout(() => {
    console.log('组件b初始化完成');
    b.$mount();
}, Math.random() * 1000);