Vue3组件的生命周期实现原理

175 阅读1分钟

在vue3中,setup完全取代了beforeCreate和created两个钩子

示例:

image.png

image.png

实现:

创建全局变量currentInstance用来保存当前实例,并提供设置和获取的方法

image.png

在组件的setup执行之前设置当前实例,执行之后把当前实例重置

image.png

  • 这样我们就可以在setup执行的时候,在生命周期的钩子里拿到当前的组件实例

处理生命周期逻辑

image.png

  • 在runtime-core模块下src里创建apiLifecycle.ts文件用于存放声明周期钩子

有可能用户不在setup里调用,那么我们要进行判断

image.png

先看一下当前实例上有没有当前的这个类型,如果没有赋上一个数组

image.png

拿到当前组件实例上存储对应生命周期的属性后,我们就把用户传的hook放进去

image.png

我们先写个方法,能够去遍历调用这些钩子

image.png

在组件的渲染过程中,我们去调用这些钩子

image.png

  • 在调用组件的render之前,我们看下组件实例上是否有bm属性,如果有就渲染去调它
  • 在patch方法之后,看下组件实例上是否有m,如果有,就循环调用它

组件更新的时候,同理

image.png

问题:

    至此,就会产生一个问题,如果按照刚才我们的逻辑,这些hooks在执行的时候,hooks内部通过getCurrentInstance拿到的当前实例是null,但是Vue3官方中是能拿到当前实例的,所以我们还需处理下

解决:

    我们可以处理下hook,用切片的方式,在调hook之前,把实例设置上去,调完之后,在设置回去

image.png