vue2和vue3生命周期

160 阅读2分钟

vue的生命周期大概分为分为创建前后,挂载前后,更新前后和销毁前后

vue2生命周期

1.beforeCreate 实例创建之前,可以做插件的一些初始化

2.created 实例创建完成,可以访问数据或者获取接口数据

3.beforMount Render函数首次调用,虚拟dom创建完成,并未挂载在页面上

4.mounted dom创建完成,挂载到页面上,可以访问到dom和子组件。不过mounted不能保证所有子组件都被挂载完成,如果需要所有视图都渲染完再进行操作的时候可以用$nextTick更保险

5.beforeUpdate 数据更新之前,此时数据更新了,但是页面上还没有更新。

6.updated 数据更新完成 注意点:此时不能保证视图全部更新完成,如果需要所有视图都渲染完在进行操作的话,可以用$nextTick更保险

7.beforeDestory 实例销毁前,此时实例并没有销毁,可以做定时器和订阅事件的清除。

8.destoryed 实例销毁了,就没有了

如果使用了keep-alive的话会多出来三个生命周期

9.activated被keep-alive缓存组件激活时触发

10.deactivated 被keep-alive缓存组件失活时触发

11.errorCaptured 在捕获一个来自后代组件的错误时被调用

vue3生命周期

1.beforeDestory ---> beforeUnmounted 实例销毁前,此时实例并没有销毁,可以做定时器和订阅事件的清除。

2.destoryed ---> unmounted

3.新增 renderTracked 调试钩子

跟踪虚拟dom重新渲染时调用。此事件告诉你那个操作跟踪组件以及该操作的目标对象和键

4.新增 renderTriggered 调试钩子

当虚拟dom重新渲染被触发时调用,此事件告诉你是什么操作触发了重新渲染,以及该操作的目标对象和键。

Tips

1.在setup()里调用生命周期函数,只需要加上前缀on即可

2.setup时围绕beforeCreate和created生命周期钩子运行的,所以不用显式的定义出来。

3.setup执行在beforeCreate和created之前