Vue.js と Nuxt.js のライフサイクル早引きメモ

Vue.js

Lifecycle

• Lifecycle Diagram - The Vue Instance — Vue.js

Lifecycle, in case with SSR

Since there are no dynamic updates, of all the lifecycle hooks, only beforeCreate and created will be called during SSR. This means any code inside other lifecycle hooks such as beforeMount or mounted will only be executed on the client.

• Component Lifecycle Hooks | Vue SSR Guide | Writing Universal Code

Nuxt.js

The big picture

間違いあれば、ご指摘頂けると助かります

Middlewares, the big picture

Understanding modules, serverMiddleware and plugins in Nuxt Js Configuration @nuxt_js @vuejs ✍️ pic.twitter.com/QSubHBkECP

— krutiepatel (@KrutiePatel) June 2, 2018

Lifecycle hooks, the big picture

Understanding Nuxt.js Lifecycle Hooks... @nuxt_js @vuejs ...had ton of fun creating this diagram. ✍️ pic.twitter.com/nDu1dXRfEF

— krutiepatel (@KrutiePatel) May 25, 2018

According to this diagram, the hooks happen in this order: nuxtServerInit, middleware, and then fetch and asyncData.

• Async Data Options in Vue's Nuxt.js

• Understanding how fetch works in Nuxt 2.12 - NuxtJS