:::

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生命週期方法

:::

書籍目錄

展開 | 闔起

https%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbsn%3D33%26tbdsn%3D1853

計數器

今天: 2826282628262826
昨天: 3755375537553755
總計: 4458665445866544586654458665445866544586654458665