onMounted方法詳解

一、什麼是onMounted方法

onMounted 方法是 Vue.js 組件選項中的一個鉤子函數，它會在組件掛載完成後被調用。

在這一步，組件已經完成了以下幾個過程：模板編譯、執行 render 函數、把 render 函數執行的結果掛載到頁面上成為真實 DOM、觸發 beforeMount、完成真實 DOM 渲染等過程。

如果我們需要在組件完全掛載到 DOM 樹上後再對 DOM 或組件進行操作，就可以使用 onMounted 這個鉤子函數。

二、onMounted方法用法

使用 onMounted 方法需要先引入 “vue”，然後在組件中使用 setup 函數創建一個返回對象。

在這個返回對象中，可以有多個方法和屬性，其中 onMounted 就是其中之一。

import { onMounted } from "vue";

export default {
  setup() {
    onMounted(() => {
      //todo
    })
  }
}

三、onMounted方法的應用場景

1. Ajax請求數據

當我們需要通過 Ajax 請求遠程數據時，應該在整個組件構造完成並掛載完畢後再發起請求。

如果我們在 created 或 mounted 階段就直接請求數據，那麼可能會遇到一些問題，比如請求數據需要一些時間，但是在這段時間內，組件已經進行了處理，數據返回後需要重新處理組件，這樣會帶來一些不必要的性能損失。

因此，使用 onMounted 鉤子函數可以確保我們在組件完全掛載到 DOM 樹上後再進行數據請求。

import { reactive, onMounted } from "vue";

export default {
    setup() {
        const state = reactive({ items: [] });
        
        onMounted(async () => {
            const res = await fetch("https://api.example.com/items");
            state.items = await res.json();
        });

        return { state };
    }
}

2. 處理 DOM 元素

當我們需要使用原生 API 對 DOM 元素進行操作時，需要等到它掛載完成後再進行操作。

使用 onMounted 鉤子函數，可以確保 DOM 元素已經完全掛載到頁面上後再進行操作，這樣可以避免操作未掛載完畢的元素，避免出現一些未知的問題。

import { onMounted } from "vue";

export default {
    setup() {
        onMounted(() => {
            const ele = document.getElementById("my-ele");
            ele.style.color = "red";
        })
    }
}

3. 優化組件初始化效率

在組件的 created 和 mounted 階段，Vue.js 都會執行大量的代碼，包括響應式數據的掛載等。

使用時機合理的 onMounted 鉤子函數，可以將一部分初始化代碼延遲到組件已完全掛載後再執行，從而提升組件初始化的效率。

四、onMounted方法注意事項

使用 onMounted 鉤子函數時需要注意以下幾點：

1. onMounted 鉤子函數只能在 setup 函數中調用；

2. setup 函數必須返回一個對象，否則 onMounted 鉤子函數無法調用；

3. 避免在 onMounted 鉤子函數中頻繁調用 setState 等方法，這會導致組件頻繁更新，降低性能；

4. 官方推薦使用異步函數（async/await）來處理副作用。