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之前