vue生命周期

关于组件的生命周期,是时候放出这张图片了:

vue生命周期

这张图片已经讲得很清楚了,很多人这部分也很清楚了,大部分生命周期并不会用到,这里提一下几点:

  1. ajax请求最好放在created里面,因为此时已经可以访问this了,请求到数据就可以直接放在data里面。

  2. 这里也碰到过几次,面试官问:ajax请求应该放在哪个生命周期。

  3. 关于dom的操作要放在mounted里面,在mounted前面访问dom会是undefined

  4. 每次进入/离开组件都要做一些事情,用什么钩子:

  • 不缓存:

    进入的时候可以用createdmounted钩子,离开的时候用beforeDestorydestroyed钩子,beforeDestory可以访问thisdestroyed不可以访问this

  • 缓存了组件:

    缓存了组件之后,再次进入组件不会触发beforeCreatecreatedbeforeMountmounted如果你想每次进入组件都做一些事情的话,你可以放在activated进入缓存组件的钩子中

    同理:离开缓存组件的时候,beforeDestroydestroyed并不会触发,可以使用deactivated离开缓存组件的钩子来代替。

     


触发钩子的完整顺序:

将路由导航、keep-alive、和组件生命周期钩子结合起来的,触发顺序,假设是从a组件离开,第一次进入b组件:

  1. beforeRouteLeave:路由组件的组件离开路由前钩子,可取消路由离开。

  2. beforeEach: 路由全局前置守卫,可用于登录验证、全局路由loading等。

  3. beforeEnter: 路由独享守卫

  4. beforeRouteEnter: 路由组件的组件进入路由前钩子。

  5. beforeResolve:路由全局解析守卫

  6. afterEach:路由全局后置钩子

  7. beforeCreate:组件生命周期,不能访问this

  8. created:组件生命周期,可以访问this,不能访问dom

  9. beforeMount:组件生命周期

  10. deactivated: 离开缓存组件a,或者触发a的beforeDestroydestroyed组件销毁钩子。

  11. mounted:访问/操作dom。

  12. activated:进入缓存组件,进入a的嵌套子组件(如果有的话)。

  13. 执行beforeRouteEnter回调函数next。

转载自:https://mp.weixin.qq.com/s?__biz=MzA5NzkwNDk3MQ==&mid=2650588051&idx=1&sn=13f7ab94282f5f4c3b3ad8fc4024ad72&chksm=8891d3b7bfe65aa111e76c87d2df97c4ef119f57197017d9cade7666f8b274a87d7b502601ea&mpshare=1&scene=23&srcid=09050M5XvXtvknvu4l1ItQfw#rd