cobish.github.io
cobish.github.io copied to clipboard
Nuxt 生命周期的执行顺序
最近接触了 Nuxt,刚开始会被其中一些函数的执行顺序绕晕,所以记录一下。
服务端与客户端都能执行
- middleware
- asyncData
- beforeCreate
- created
服务端与客户端都能执行是什么意思?
- 当页面是直接打开,或者刷新,以上四个函数在服务端执行
- 当页面是通过前端路由跳转而来,以上四个函数中在客户端执行
需要注意的是,服务端执行的话,是不能够在前端 debugger 调试的。同时,beforeCreate 和 created 如果在服务端执行后,在客户端还是会再执行一遍。
以下是直接打开网页:
只能客户端执行
- beforeMount
- mounted
- ...
以下是前端路由跳转而来:
最后
当然这只是记录一下生命周期的执行顺序,暂时没有去搞清楚为啥会这样执行,后面有空再研究吧。