Nuxt 生命周期的执行顺序

[cobish]

最近接触了 Nuxt，刚开始会被其中一些函数的执行顺序绕晕，所以记录一下。

服务端与客户端都能执行

• middleware
• asyncData
• beforeCreate
• created

服务端与客户端都能执行是什么意思？

1. 当页面是直接打开，或者刷新，以上四个函数在服务端执行
2. 当页面是通过前端路由跳转而来，以上四个函数中在客户端执行

需要注意的是，服务端执行的话，是不能够在前端 debugger 调试的。同时，beforeCreate 和 created 如果在服务端执行后，在客户端还是会再执行一遍。

以下是直接打开网页：

只能客户端执行

• beforeMount
• mounted
• ...

以下是前端路由跳转而来：

最后

当然这只是记录一下生命周期的执行顺序，暂时没有去搞清楚为啥会这样执行，后面有空再研究吧。