14-1 nuxt 生命週期

Server 端的生命週期

• 伺服器啟動 (nuxt start) 當使用靜態網站產生時，伺服器步驟只在構建時執行，但每一個將要產生的頁面都會執行一次。
• 產生過程開始 (nuxt generate)
• Nuxt hooks
• serverMiddleware
• Server-side Nuxt plugins：按照在 nuxt.config.js 中定義的順序進行。
• nuxtServerInit
  • 僅在伺服器端呼叫的 Vuex 操作，用於預載 store。
  • 第一個參數是 Vuex context ，第二個參數是 Nuxt.js context 。
    • 從這裡  Dispatch 其他動作→伺服器端隨後的 store 唯一 "入口點"
  • 只能在 store/index.js 中定義。
• Middleware
  • Global middleware
  • Layout middleware
  • Route middleware
• asyncData
• beforeCreate Vue生命週期方法
• created Vue生命週期方法
• 新的 fetch（從上到下，同胞元素=平行）
• 狀態的序列化（render:routeContext Nuxt.js hook）
• HTML渲染（render:route Nuxt.js hook）
• render:routeDone hook 當HTML被髮送到瀏覽器時
• generate:before Nuxt.js hook
• 產生HTML檔案
  • 全靜態產生
  • generate:page（可編輯的HTML）
  • generate:routeCreated （Route 生成）
• generate:done 當所有的HTML檔案都產生后

Client端的生命週期

無論你選擇哪種Nuxt.js模式，這部分的生命週期都會在瀏覽器中完全執行。

• 接收 HTML
• 載入 assets (如： JavaScript)
• Vue 激活
• Middleware
  • Global middleware
  • Layout middleware
  • Route middleware
• asyncData（blocking 鎖定）
• client-side Nuxt.js plugin：按照在 nuxt.config.js 中定義的順序進行。
• beforeCreate Vue生命週期方法
• created Vue生命週期方法
• 新的 fetch（從上到下，同胞元素=平行，non-blocking，無鎖定）
• beforeMount Vue生命週期方法
• mounted Vue生命週期方法