Nuxt3 的生命週期和鉤子函式（一）

Amd794發表於2024-06-25
UX函式

title: Nuxt3 的生命週期和鉤子函式（一）
date: 2024/6/25
updated: 2024/6/25
author: cmdragon

excerpt:
摘要：本文是關於Nuxt3的系列文章之一，主要探討Nuxt3的生命週期和鉤子函式，引導讀者深入瞭解其在前端開發中的應用。文章提供了往期相關文章連結，涉及Nuxt中介軟體、Composables、狀態管理、路由系統、元件開發等多個方面，幫助讀者全面掌握Nuxt3框架的特性和實踐技巧。

categories:

  • 前端開發

tags:

  • Nuxt3
  • 生命週期
  • 鉤子函式
  • 前端開發
  • Web框架
  • Vue.js
  • 應用教程

image

image

掃碼關注或者微信搜一搜：程式設計智域 前端至全棧交流與成長

app:created

  • 描述：在初始 Vue 應用例項建立時呼叫。這個鉤子是在 Nuxt 應用啟動時，Vue 應用例項被建立之後立即觸發的。
  • 伺服器端：✅
  • 客戶端：✅

用法

app:created 鉤子可以在 nuxt.config.ts 檔案中的 plugins 或者在頁面元件中使用。

示例程式碼

在 nuxt.config.ts 中的外掛中使用：

// nuxt.config.ts
export default defineNuxtConfig({
  plugins: [
    {
      src: '~/plugins/my-plugin',
      mode: 'client', // 或者 'server' 或 'all'
    },
  ],
})

// plugins/my-plugin.ts
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook('app:created', () => {
    console.log('Vue 應用例項已建立');
    // 這裡可以執行一些初始化邏輯
  });
});

在頁面元件中使用：

<template>
  <div>頁面內容</div>
</template>

<script setup>
import { onBeforeMount } from 'vue'

onBeforeMount(() => {
  // 這個鉤子會在 'app:created' 之後呼叫
  console.log('頁面元件即將掛載');
})

const nuxtApp = useNuxtApp()

nuxtApp.hook('app:created', () => {
  console.log('Vue 應用例項已建立 - 頁面級別');
});
</script>

在這個示例中，app:created 鉤子被用於在 Vue 應用例項建立時輸出一條訊息。這可以用於執行一些全域性的初始化任務，比如設定全域性變數或狀態，註冊全域性元件等。需要注意的是，在伺服器端渲染 (SSR) 的上下文中，這個鉤子會在伺服器上為每個請求呼叫一次。在客戶端，這個鉤子只在應用初始化時呼叫一次。

app:error err 伺服器端和客戶端 在發生致命錯誤時呼叫。

詳細解釋

app:error 是 Nuxt 3 的一個全域性生命週期鉤子，它在伺服器端和客戶端發生未捕獲的致命錯誤時被呼叫。這個鉤子允許你定義一個自定義的錯誤處理函式，以便在發生錯誤時執行特定的邏輯，比如記錄錯誤資訊、傳送錯誤報告、顯示錯誤訊息或者重定向到錯誤頁面。

用法

在 Nuxt 3 應用中，你可以透過在 defineNuxtPlugin 函式中註冊 app:error 鉤子來使用它。

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook('app:error', (err, ctx) => {
    // 自定義錯誤處理邏輯
  });
});

案例Demo

// plugins/error-handler.js
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook('app:error', (err, ctx) => {
    console.error('An error occurred:', err.message);
    
    // 如果是客戶端錯誤，可以顯示一個錯誤訊息給使用者
    if (process.client) {
      alert('An error occurred: ' + err.message);
    }
    
    // 如果是伺服器端錯誤，可以記錄到日誌檔案或傳送到錯誤追蹤服務
    if (process.server) {
      // 例如，使用 winston 或其他日誌庫記錄錯誤
      // logger.error('Server error:', err);
      
      // 或者傳送錯誤到錯誤追蹤服務，如 Sentry
      // Sentry.captureException(err);
    }
    
    // 可以根據錯誤型別決定是否重定向
    if (err.statusCode === 404) {
      // 重定向到404頁面
      ctx.redirect('/404');
    }
  });
});

在這個案例中，我們定義了一個 app:error 鉤子，當發生錯誤時，它會列印錯誤資訊到控制檯。如果是客戶端錯誤，它會彈出一個包含錯誤資訊的警告框。如果是伺服器端錯誤，它可以記錄錯誤日誌或傳送錯誤到錯誤追蹤服務。此外，如果錯誤是一個特定的狀態碼（例如404），我們可以重定向使用者到一個特定的頁面。

app:error:cleared { redirect? } 伺服器端和客戶端 在致命錯誤被清除後呼叫。

詳細解釋

app:error:cleared 是 Nuxt 3 的一個全域性生命週期鉤子，它在伺服器端和客戶端的致命錯誤被清除後呼叫。這個鉤子允許你在錯誤被處理後執行後續操作，比如重定向使用者到另一個頁面。這個鉤子接收一個可選的 redirect 引數，它允許你指定一個重定向的路徑。

用法

在 Nuxt 3 應用中，你可以透過在 defineNuxtPlugin 函式中註冊 app:error:cleared 鉤子來使用它。

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook('app:error:cleared', (redirect, ctx) => {
    // 自定義錯誤清除後的邏輯
  });
});

案例Demo

// plugins/error-clear-handler.js
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook('app:error:cleared', (redirect, ctx) => {
    // 如果提供了重定向路徑，則進行重定向
    if (redirect) {
      ctx.redirect(redirect);
    }
    
    // 可以在這裡執行其他清理工作，例如清除錯誤狀態
    // 或者通知使用者錯誤已經被處理
    if (process.client) {
      // 例如，更新UI來反映錯誤已經被處理
      // updateErrorState(false);
    }
    
    // 如果是伺服器端，可能需要清除伺服器狀態或傳送通知
    if (process.server) {
      // 清理伺服器狀態或傳送通知
      // serverCleanup();
    }
  });
});

在這個案例中，我們定義了一個 app:error:cleared 鉤子，當致命錯誤被清除後，它會檢查是否提供了重定向路徑，如果提供了，則執行重定向。此外，它還可以執行其他清理工作，例如在客戶端更新UI狀態以反映錯誤已經被處理，或者在伺服器端清理伺服器狀態或傳送通知。這個鉤子是處理錯誤後恢復應用狀態的有用工具。

app:data:refresh keys? 伺服器端和客戶端 (內部)

詳細解釋

app:data:refresh 是 Nuxt 3 中的一個內部生命週期鉤子，主要用於資料重新整理。它在需要重新獲取資料時被觸發，通常發生在使用者重新整理頁面或者在某些情況下資料更新後。keys 引數是可選的，它是一個陣列，包含需要重新整理的資料的鍵名，如果不提供，會重新整理所有資料。

用法

在 Nuxt 3 中，你通常不會直接在 defineNuxtPlugin 中使用這個鉤子，因為它是內部呼叫的。然而，如果你需要在外掛中影響資料重新整理行為，可以透過監聽相關事件來間接使用。

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.on('dataRefresh', (keys) => {
    // 在這裡處理資料重新整理操作，例如更新快取、請求新資料等
    if (keys) {
      // 如果提供了keys，只重新整理指定的資料
      keys.forEach((key) => {
        nuxtApp.$store.dispatch('refreshData', key);
      });
    } else {
      // 否則重新整理所有資料
      nuxtApp.$store.dispatch('refreshAllData');
    }
  });
});

案例Demo

// plugins/data-refresh.js
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.on('dataRefresh', async (keys) => {
    if (keys) {
      const promises = keys.map(async (key) => {
        const freshData = await fetchNewData(key);
        nuxtApp.$store.commit('updateData', { key, data: freshData });
      });
      await Promise.all(promises);
    } else {
      const allData = await fetchAllData();
      nuxtApp.$store.commit('updateAllData', { data: allData });
    }
  });
});

// 在 store 中定義 mutation
export const mutations = {
  updateData(state, { key, data }) {
    state[key] = data;
  },
  updateAllData(state, { data }) {
    state = data;
  },
};

在這個案例中，我們建立了一個外掛，監聽 dataRefresh 事件。當事件觸發時，我們根據提供的 keys 重新整理指定的資料，或者重新整理所有資料。然後，我們更新 Vuex 儲存中的資料。注意，實際的 fetchNewData 和 fetchAllData 需要你根據你的應用邏輯來實現。

vue:setup - 伺服器端和客戶端 (內部)

詳細解釋

vue:setup 是 Nuxt 3 中的一個生命週期鉤子，它在每個 Vue 元件的 setup 階段被呼叫。這個鉤子主要用於在元件的初始化階段進行資料處理、依賴注入、API 設定等操作。由於它是基於 Vue 的，所以它在客戶端和伺服器端都會執行，但伺服器端渲染時，它主要作用於預渲染階段。

用法

在 Nuxt 3 中，vue:setup 通常用於建立自定義元件，它會接收一個 app 物件，你可以透過這個物件訪問 Nuxt 應用例項。例如，你可以注入 $store 或 $router，並定義元件的區域性狀態和方法。

export default defineComponent({
  setup() {
    const store = inject('store');
    const router = inject('router');

    // 在這裡定義元件的區域性狀態和方法
    const count = ref(0);
    const increment = () => {
      count.value++;
    };

    // 使用store和router
    watch(() => router.currentRoute.value.name, () => {
      // 當路由改變時執行某些操作
    });

    return {
      count,
      increment,
    };
  },
});

案例Demo

// components/MyComponent.vue
export default defineComponent({
  setup() {
    const { $store } = inject();
    const myData = ref($store.state.myData);

    // 在setup中獲取並使用store中的資料
    useEffect(() => {
      async function fetchData() {
        const newData = await fetchMyData();
        myData.value = newData;
      }
      fetchData();
    }, []);

    // 示例方法，使用store資料
    const updateData = (newValue) => {
      myData.value = newValue;
      $store.commit('updateMyData', newValue);
    };

    return {
      myData,
      updateData,
    };
  },
});

// 在store/index.js中定義mutation
export const mutations = {
  updateMyData(state, newData) {
    state.myData = newData;
  },
};

在這個案例中，我們在 vue:setup 中注入 $store，獲取並使用儲存中的資料。當元件掛載時，我們會從伺服器獲取資料並更新元件狀態。同時，我們定義了一個 updateData 方法，用於更新 store 中的資料。在客戶端和伺服器端，這個元件都會執行這些操作。

vue:error - err, target, info - 伺服器端和客戶端 - 當 Vue 錯誤傳播到根元件時呼叫。瞭解更多。

詳細解釋

vue:error 是 Nuxt 3 中的一個生命週期鉤子，它在 Vue 應用程式的錯誤處理過程中起作用。當 Vue 錯誤傳播到根元件時，這個鉤子會被呼叫。這個鉤子可以用於在伺服器端和客戶端記錄和處理錯誤。

app:rendered - renderContext - 伺服器端 - 在 SSR 渲染完成時呼叫

app:rendered

鉤子：app:redirected

餘下文章內容請點選跳轉至 個人部落格頁面 或者 掃碼關注或者微信搜一搜：程式設計智域 前端至全棧交流與成長，閱讀完整的文章：Nuxt3 的生命週期和鉤子函式（一） | cmdragon's Blog

往期文章推薦：

往期文章歸檔：

  • 初學者必讀：如何使用 Nuxt 中介軟體簡化網站開發 | cmdragon's Blog
  • 深入探索 Nuxt3 Composables：掌握目錄架構與內建API的高效應用 | cmdragon's Blog
  • 掌握 Nuxt 3 中的狀態管理：實踐指南 | cmdragon's Blog
  • Nuxt 3 路由系統詳解：配置與實踐指南 | cmdragon's Blog
  • Nuxt 3元件開發與管理 | cmdragon's Blog
  • Nuxt3頁面開發實戰探索 | cmdragon's Blog
  • Nuxt.js 深入淺出：目錄結構與檔案組織詳解 | cmdragon's Blog
  • 安裝 Nuxt.js 的步驟和注意事項 | cmdragon's Blog
  • 探索Web Components | cmdragon's Blog
  • Vue微前端架構與Qiankun實踐理論指南 | cmdragon's Blog
  • Vue 3深度探索：自定義渲染器與服務端渲染 | cmdragon's Blog

相關文章