:::
14. nuxt 框架
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:routeContextNuxt.js hook） - HTML渲染（
render:routeNuxt.js hook） render:routeDonehook 當HTML被髮送到瀏覽器時generate:beforeNuxt.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生命週期方法
