在vue3中,setup完全取代了beforeCreate和created两个钩子
示例:
实现:
创建全局变量currentInstance用来保存当前实例,并提供设置和获取的方法
在组件的setup执行之前设置当前实例,执行之后把当前实例重置
- 这样我们就可以在setup执行的时候,在生命周期的钩子里拿到当前的组件实例
处理生命周期逻辑
- 在runtime-core模块下src里创建apiLifecycle.ts文件用于存放声明周期钩子
有可能用户不在setup里调用,那么我们要进行判断
先看一下当前实例上有没有当前的这个类型,如果没有赋上一个数组
拿到当前组件实例上存储对应生命周期的属性后,我们就把用户传的hook放进去
我们先写个方法,能够去遍历调用这些钩子
在组件的渲染过程中,我们去调用这些钩子
- 在调用组件的render之前,我们看下组件实例上是否有bm属性,如果有就渲染去调它
- 在patch方法之后,看下组件实例上是否有m,如果有,就循环调用它
组件更新的时候,同理
问题:
至此,就会产生一个问题,如果按照刚才我们的逻辑,这些hooks在执行的时候,hooks内部通过getCurrentInstance拿到的当前实例是null,但是Vue3官方中是能拿到当前实例的,所以我们还需处理下
解决:
我们可以处理下hook,用切片的方式,在调hook之前,把实例设置上去,调完之后,在设置回去