VUE life cycle encyclopedia, including router life cycle, single component life cycle, parent-child component nested life cycle

Table of contents

1. Router life cycle (I roughly drew a mind map)

2. Single component life cycle

3. Parent-child component nested life cycle

4. When using keep-alive occasions, enter the life cycle triggered twice by entering a certain page

5. Actual usage scenarios

1. Router life cycle (I roughly drew a mind map)

1. beforeRouteLeave => 2. beforeEach =>   3. beforeRouteUpdate => 4. beforeEnter => 

5. beforeRouteEnter => 6.beforeResolve => 7.afterEach

(Component routing: 1, 3, 5 Exclusive routing: 4 Global routing: 2, 6, 7)

Routing hook functions can be roughly divided into three types according to different configuration places

The first type: global routing contains:

        Global pre-defense: router.beforeEach, (the processing before each routing jump can be used to determine whether the current user is logged in, start the progress bar, etc...)

        Global resolution guard: router.beforeResolve, (the processing of each routing jump can be used to end the progress bar, etc...)

        Global post-defense: router.afterEach, (the processing of each routing jump can be used to end the progress bar, etc...)

The second type: Exclusive routing includes

        Exclusive route defense: beforeEnter (triggered when entering a route)

The third type: component routing contains

        Component routing: beforeRouteEnter (triggered before the corresponding route that renders the component is verified)

        Component routing: beforeRouteUpdate (called when the current route changes, but the component is reused)

        Component routing: beforeRouteLeave (called when navigating away from the corresponding route that renders the component)

Note : In the process of using, if you find that the route is stuck, check the next operation carefully

Take beforeEnter as an example, if you configure beforeEnter, you need to set next() to let it have an exit, otherwise it will get stuck

Note : beforeEach may fall into an infinite loop due to your writing problem. Please check carefully to ensure that next is strictly called once under any circumstances. When judging if, you must strictly add else

 Global routing:

import NProgress from 'nprogress' // Progress 进度条
import { getToken } from '@/utils/auth' // 验权
import router from './router'

/*
* 确保 next 在任何给定的导航守卫中都被严格调用一次。
* 它可以出现多于一次，但是只能在所有的逻辑路径都不重叠的情况下，
* 否则钩子永远都不会被解析或报错。
*/
router.beforeEach((to, from, next)=>{
    // 进度条开始
    NProgress.start()
    // 判断 token 是否存在
    if(getToken()){
        next()
    }else{
        next('/login')
    }
})

/*
* beforeResolve 与 beforeEach 类似
* 官方说明：它在 每次导航时都会触发，但是确保在导航被确认之前  
* 同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被正确调用。
*/
router.beforeResolve((to, from, next)=>{
    console.log(' wosjio ')
})

/*
* 这个钩子不会接受 next 函数也不会改变导航本身
*/
router.afterEach((to, from) => {
    // 进度条结束
    NProgress.done()
})

Exclusive route:

/*
* 直接在路由配置上定义守卫
* 只在进入路由时触发，（它们只有在 从一个不同的 路由导航时，才会被触发）。
*/
{
    path: 'password',
    name: 'password',
    component: () => import('@/views/pms/publisherInfo/password'),
    meta: {
        title: '密码管理',
        keepAlive: true 
    },
    hidden: true,
    beforeEnter: (to, from, next) => {
        console.log('my is beforeEnter')
        next()
    },
},

Component routing:

beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被验证前调用
    // 不能获取组件实例 `this` ！
    // 因为当守卫执行时，组件实例还没被创建！
    console.log('my is beforeRouteEnter')
    next(vm => {
        // 通过 `vm` 访问组件实例
        console.log(vm.text)
    })
},

beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 `/users/:id`，在 `/users/1` 和 `/users/2` 之间跳转的时候，
    // 由于会渲染同样的 `UserDetails` 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 因为在这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 `this`
    console.log('my is beforeRouteUpdate')
    next()
},
beforeRouteLeave(to, from, next) {
    // 在导航离开渲染该组件的对应路由时调用
    // 与 `beforeRouteUpdate` 一样，它可以访问组件实例 `this`
    console.log('my is beforeRouteLeave')
    next()
},

2. Single component life cycle

Four hooks are triggered in sequence when a single-component page loads :

beforeUpdate => updated => beforeMount => mounted

The hook is triggered when the single component page changes :

beforeUpdate => updated

Two hooks are triggered in sequence when the single-component page leaves:

beforeDestroy => deactivated

3. Parent-child component nested life cycle

Eight hooks are triggered in sequence when the parent-child component nested page loads:

Parent component beforeUpdate => Parent component updated => Parent component beforeMount =>

 Subcomponent beforeUpdate => Subcomponent updated => Subcomponent beforeMount => Subcomponent mounted => Parent component mounted

The parent component finishes loading last

The hook is triggered when the parent-child component nested page changes :

Modify the data in which component, trigger  beforeUpdate => updated in which component

Four hooks are triggered in sequence when the parent-child component nested page leaves:

Parent component beforeDestroy => Child component beforeDestroy => Child component deactivated => Parent component deactivated

The parent component is finally destroyed

4. When using keep-alive occasions, enter the life cycle triggered twice by entering a certain page

Entering a for the first time triggers the hook:

[a] beforeCreate => [a] created => [a] beforeMount => [a] mounted => [a] activated

Jump to b to trigger the hook:

[b] beforeCreate => [b] created => [b] beforeMount => [a] deactivated => [b] mounted => [b] activated

Enter a for the second time:
[a]  activated

5. Actual usage scenarios

created: Extract the parameters on the route and send the request

mounted: Get the DOM

nextTick: Immediately execute DOM related business after data update

updated: Any data update, if you want to do unified business logic processing

beforeUpdate: The edited data has not been saved, ask the user whether to save and then exit the current page

watch: monitor specific data changes and do corresponding processing

beforeCreate() {
    /*
    * 在实例初始化之后，数据观测和事件配置之前被调用，
    * 此时组件的选项对象还未创建，el 和 data 并未初始化，
    * 因此无法访问methods， data， computed等上的方法和数据。
    */
    console.log('my is beforeCreate')
},
created() {
    /*
    * 实例已经创建完成之后被调用，在这一步，实例已完成以下配置：数据观测、属性和方法的运算，watch/event事件回调，完成了data 数据的初始化，
    * 在这里可以进行调用data数据，以及方法，发送ajax一些操作
    */
    console.log('created')
},
beforeMount() {
    /*
    * DOM 渲染之前被调用，并且开始通过 render 建立虚拟 DOM
    */
    console.log('beforeMount')
},
mounted() {
    /*
    * DOM 渲染完成被调用，这时页面已经渲染完毕
    * 可以通过 ref 获取页面元素的 DOM 了
    */
    console.log('mounted')
},
beforeUpdate(){
    /*
    * 数据更新前被调用
    * data 数据有更新时，内存中重新编译了最新模板字符串，但还未重新渲染DOM
    */
    console.log('beforeUpdate')
},
updated() {
    /*
    * 数据更新完成后被调用
    * 已经重新渲染 DOM ，这时你可以继续操作 DOM
    */
    console.log('updated')
},
beforeDestroy() {
    /*
    * 实例销毁之前调用
    * 这时date内数据以及方法，过滤器等依然还可以使用
    */
    console.log('beforeDestroy')
},
destroyed() {
    /*
    * 实例销毁完成后调用
    * 实例的所有东西都会解绑销毁
    */
    console.log('deactivated')
},

Students are welcome to comment!