nuxt的生命周期

服务端生命周期

服务器初始化nuxtServerInit
创建store/index.js

export const actions = {
    nuxtServerInit(store,context){
        console.log('nuxtServerInit',store,context)
    }
}

中间件运行middleware
在nuxt.config.js中定义中间件

router:{
   middleware:'auth' 
}

创建中间件文件middleware/auth.js

export default function({store,route,redirect,params,query,req,res}) {
    console.log('middleware')
}

定义在layouts/default.vue中

export default{
    // middleware:'auth' ,
     middleware(){
         console.log('middleware')
    }
}

定义在pages/index.vue中

export default{
    // middleware:'auth' ,
     middleware(){
         console.log('middleware')
    }
}

验证参数validate

export default{
     validate(context){
         console.log('validate')
        return true
    }
}

异步数据处理asyncData、 fetch

export default{
     asyncData(context){
         console.log('asyncData')
        return {
            a:666
        }
    },
    fetch(context){
         console.log('fetch')
    }
}

开始客户端渲染Render

Vue生命周期 SSR CSR

组件创建前beforeCreated

export default{
     beforeCreated(){
       console.log('beforeCreated')
    }
}

组件创建后created

export default{
     created(){
       console.log('created')
    }
}

运行在客户端

组件加载前 beforeMount
组件加载完毕 mounted
组件更新前 beforeUpdate
组件更新完毕 updated
组件卸载前 beforeDestroy
组件卸载后 destroyed