Nuxt.js 應用中的 app：mounted 鉤子詳解

Amd794發表於2024-10-05
UXJSAPP

title: Nuxt.js 應用中的 app：mounted 鉤子詳解
date: 2024/10/5
updated: 2024/10/5
author: cmdragon

excerpt:
app:mounted 鉤子在 Vue 應用的生命週期中扮演著重要角色，提供了在元件被掛載後的執行時機。透過合理利用這個鉤子，我們能夠提高元件的互動性、使用者體驗以及效能最佳化。確保在其內部程式碼的健壯性和清理機制，將為你的 Vue 應用帶來顯著的提升。

categories:

  • 前端開發

tags:

  • Nuxt.js
  • app:mounted
  • 生命週期
  • Vue應用
  • DOM操作
  • 元件渲染
  • 鉤子函式

image
image

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

目錄

  1. 概述
  2. app:mounted 鉤子的詳細說明
    • 2.1 鉤子的定義與作用
    • 2.2 呼叫時機
    • 2.3 返回值與異常處理
  3. 具體使用示例
    • 3.1 元件渲染後執行邏輯
    • 3.2 第三方庫初始化
  4. 應用場景
  5. 實際開發中的最佳實踐
  6. 注意事項
  7. 關鍵要點
  8. 練習題
  9. 總結

1. 概述

app:mounted 是 Vue 應用中的生命週期鉤子，在 Vue 例項被掛載到 DOM 後即會被呼叫。此鉤子的執行標誌著元件的初始渲染已完成，因此特別適合用於執行那些依賴於
DOM 的邏輯。

2. app:mounted 鉤子的詳細說明

2.1 鉤子的定義與作用

app:mounted 鉤子允許開發者在 Vue 例項被正確掛載到 DOM 後立即執行一些操作。這類操作通常包括：

  • 獲取 DOM 元素的實時大小
  • 進行動畫初始化
  • 處理與 UI 相關的外掛初始化

2.2 呼叫時機

  • 執行環境: 該鉤子僅在客戶端執行。這意味著在伺服器端執行時不會被觸發。
  • 掛載時機: 當 Vue 例項被建立並掛載完成，即開始渲染 DOM 後，該鉤子被呼叫。這是執行涉及到 DOM 操作或需要實時更新的邏輯的最佳時機。

2.3 返回值與異常處理

app:mounted 不會有返回值，而是用於執行需要執行的程式碼塊。如果在這個鉤子內部丟擲異常，可能會中斷後續的執行，因此需要確保程式碼的穩健性。

3. 具體使用示例

3.1 元件渲染後執行邏輯

你可以利用 app:mounted 鉤子在元件被渲染後訪問它們的 DOM 元素並執行一些邏輯。

// plugins/mountedPlugin.js
export default defineNuxtPlugin({
    hooks: {
        'app:mounted'() {
            const element = document.querySelector('.my-element');

            // 例如，獲取元素的寬度並輸出
            if (element) {
                console.log('元素寬度:', element.offsetWidth);
            }
        }
    }
});

在這個示例中，我們獲取了 .my-element 類的 DOM 元素，並在控制檯輸出其寬度。

3.2 第三方庫初始化

app:mounted 還可以用作第三方庫的初始化。例如，在應用掛載後初始化圖表庫：

// plugins/chartPlugin.js
import Chart from 'chart.js';

export default defineNuxtPlugin({
    hooks: {
        'app:mounted'() {
            const ctx = document.getElementById('myChart').getContext('2d');
            const myChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
                    datasets: [{
                        label: '# of Votes',
                        data: [12, 19, 3, 5, 2, 3],
                        backgroundColor: [
                            'rgba(255, 99, 132, 0.2)',
                            'rgba(54, 162, 235, 0.2)',
                            'rgba(255, 206, 86, 0.2)',
                            'rgba(75, 192, 192, 0.2)',
                            'rgba(153, 102, 255, 0.2)',
                            'rgba(255, 159, 64, 0.2)',
                        ],
                        borderColor: [
                            'rgba(255, 99, 132, 1)',
                            'rgba(54, 162, 235, 1)',
                            'rgba(255, 206, 86, 1)',
                            'rgba(75, 192, 192, 1)',
                            'rgba(153, 102, 255, 1)',
                            'rgba(255, 159, 64, 1)',
                        ],
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
        }
    }
});

在這個示例中，我們在 DOM 完成掛載後初始化了一個簡單的柱狀圖。

4. 應用場景

  1. 動態樣式或佈局處理: 根據 DOM 元素的初始狀態（如寬度、高度）對佈局進行調整。
  2. 事件繫結: 在元件的 DOM 元素上繫結自定義事件監聽器。
  3. 第三方庫: 初始化需要 DOM 的第三方庫，如圖表庫、地圖工具等。

5. 實際開發中的最佳實踐

  1. 避免阻塞: 儘量避免在 app:mounted 鉤子內執行耗時操作，以維護良好的使用者體驗。
  2. 條件邏輯: 確保在訪問 DOM 元素之前檢查其存在與可用狀態。
  3. 清理資源: 如果繫結了事件或建立了定時器，確保在元件的銷燬（例如，beforeDestroy 鉤子）時進行清理。

6. 注意事項

  • 非同步請求: 在 app:mounted 內發起非同步請求時，必須做好狀態管理和資料處理，以免出現未定義狀態。
  • 測試: 確保對依賴於 DOM 的功能進行很好的測試，以應對不同瀏覽器或環境下的表現差異。

7. 關鍵要點

  • app:mounted 是一個重要的生命週期鉤子，只在客戶端執行。
  • 適用於在元件初始化後執行與 DOM 相關的操作。
  • 需注意處理異常和確保資源的及時清理。

8. 練習題

  1. 動態樣式調整: 編寫一個外掛，在 app:mounted 中根據視窗大小調整某個元件的 CSS 樣式。
  2. 事件監聽: 利用 app:mounted 在特定元素上新增點選事件監聽器，並在點選時列印相關資訊。
  3. 重繪圖表: 實現一個功能，當視窗大小發生改變時，能夠重新繪製圖表並顯示更新後的資料。

9. 總結

app:mounted 鉤子在 Vue 應用的生命週期中扮演著重要角色，提供了在元件被掛載後的執行時機。透過合理利用這個鉤子，我們能夠提高元件的互動性、使用者體驗以及效能最佳化。確保在其內部程式碼的健壯性和清理機制，將為你的
Vue 應用帶來顯著的提升。

餘下文章內容請點選跳轉至 個人部落格頁面 或者 掃碼關注或者微信搜一搜：程式設計智域 前端至全棧交流與成長，閱讀完整的文章：Nuxt.js 應用中的 app：mounted 鉤子詳解 | cmdragon's Blog

往期文章歸檔：

  • Nuxt.js 應用中的 app：beforeMount 鉤子詳解 | cmdragon's Blog
  • Nuxt.js 應用中的 app：redirected 鉤子詳解 | cmdragon's Blog
  • Nuxt.js 應用中的 app：rendered 鉤子詳解 | cmdragon's Blog
  • 應用中的錯誤處理概述 | cmdragon's Blog
  • 理解 Vue 的 setup 應用程式鉤子 | cmdragon's Blog
  • 深入理解 Nuxt.js 中的 app：data：refresh 鉤子 | cmdragon's Blog
  • 深入理解 Nuxt.js 中的 app：error：cleared 鉤子 | cmdragon's Blog
  • 深入理解 Nuxt.js 中的 app：error 鉤子 | cmdragon's Blog
  • 深入理解 Nuxt 中的 app created 鉤子 | cmdragon's Blog
  • Nuxt Kit 實用工具的使用示例 | cmdragon's Blog
  • 使用 Nuxt Kit 的構建器 API 來擴充套件配置 | cmdragon's Blog
  • Nuxt Kit 使用日誌記錄工具 | cmdragon's Blog
  • Nuxt Kit API ：路徑解析工具 | cmdragon's Blog
  • Nuxt Kit中的 Nitro 處理程式 | cmdragon's Blog
  • Nuxt Kit 中的模板處理 | cmdragon's Blog
  • Nuxt Kit 中的外掛：建立與使用 | cmdragon's Blog
  • Nuxt Kit 中的佈局管理 | cmdragon's Blog
  • Nuxt Kit 中的頁面和路由管理 | cmdragon's Blog
  • Nuxt Kit 中的上下文處理 | cmdragon's Blog
  • Nuxt Kit 元件管理：註冊與自動匯入 | cmdragon's Blog
  • Nuxt Kit 自動匯入功能：高效管理你的模組和組合式函式 | cmdragon's Blog
  • 使用 Nuxt Kit 檢查模組與 Nuxt 版本相容性 | cmdragon's Blog
  • Nuxt Kit 的使用指南：從載入到構建 | cmdragon's Blog
  • Nuxt Kit 的使用指南：模組建立與管理 | cmdragon's Blog

相關文章