Vue生命周期源码（浅）解读

type

status

date

slug

summary

category

icon

password

First

生命周期历程：

Then

解释：在vue中写入对应生命周期函数首先会触发createHooks

这里的每个生命周期被vue定义了别名其实就是枚举

在Vue 中getCurrentInstance()可以获取当前组件的实例实例中会有m,c等的函数其实就是被挂载到实例的生命周期函数

再说createHooks 这个函数调用了injectHooks（这里使用了函数科里化因为这些hook都是生命周期函数所以只有第一个参数不同其他参数通过柯里化省略）

看看injectHooks

如果有实例的话把hooks初始化为对应的生命周期函数如果没有生命周期函数就初始化为空数组

以上就是对生命周期函数的初始化

之后生命周期函数就在对应的时间点进行执行

在renderer.ts → componentUpdateFn()

这里有个判断走if即还没挂载也就是组件初始化

先执行这个钩子然后做一些render和patch 挂载vnode

现在有dom元素了所以

组件初始化结束然后就是else的更新

这时候dom还没更新所以render+patch

然后

卸载在另一个函数 unmount（）

首先清空收集的依赖和副作用函数

然后执行onBeforeMount

然后清空子树

最后执行unmounted