山地人

深入组件生命周期

山地人
山地人
2021-06-03

这一节,我们模仿Vue的生命周期的过程,手写一个MyVue,通过这个手写实现过程,从而让我们对组件生命周期有更深刻的认识。也为我们今后编写自己的前端框架做一些准备。

Vue中的生命周期

MyVue

下面的代码,我们自己写一版myvue,让组件配置过程基本做到和Vue的一样。

当然,这个封装比较简陋,我们的目的是弄清楚这些阶段究竟Vue这种框架究竟做了些什么?

传入参数

MyVue的构造函数中,我们接收cfg配置参数,构造函数中,对传入的cfg参数进行稍微处理后保存。

处理生命周期相关钩子函数

我们封装了一个mergeLifecycleMethod方法来专门处理生命周期相关的方法。保证用户在不配置这些钩子函数的情况下,框架依然可以正常运转。 如果用户不传递生命周期方法,框架会用noop空操作函数去顶替对应阶段。

分配钩子函数

在框架不同阶段埋上不同的钩子函数,方便用户在使用框架时,可以在不同阶段进行定制处理。

自定义组件的处理

自定义组件的执行流程,基本上和根节点的处理流程是一样的,所以我们在处理子组件的时候,再次利用MyVue构造节点。

而自定义组件的配置信息,放在了app内部的$components中进行保存。

render函数实现

为了简化我们的Demo,这个案例中,我们没有去实现template的机制,因为我们的目的是搞清楚生命周期流程。所以做了render函数的简单实现,让简单流程能够运行起来,毕竟我们现在的目标是理解框架,而不是写一个多么完善的框架。

这次关于组件生命周期的讲解就先写到这里了,希望对你有所帮助。