一、什么是onMounted方法

onMounted 方法是 Vue.js 組件選項(xiàng)中的一個(gè)鉤子函數(shù)，它會(huì)在組件掛載完成后被調(diào)用。

在這一步，組件已經(jīng)完成了以下幾個(gè)過程：模板編譯、執(zhí)行 render 函數(shù)、把 render 函數(shù)執(zhí)行的結(jié)果掛載到頁面上成為真實(shí) DOM、觸發(fā) beforeMount、完成真實(shí) DOM 渲染等過程。

如果我們需要在組件完全掛載到 DOM 樹上后再對 DOM 或組件進(jìn)行操作，就可以使用 onMounted 這個(gè)鉤子函數(shù)。

二、onMounted方法用法

使用 onMounted 方法需要先引入 "vue"，然后在組件中使用 setup 函數(shù)創(chuàng)建一個(gè)返回對象。

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

import { onMounted } from "vue";

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

三、onMounted方法的應(yīng)用場景

1. Ajax請求數(shù)據(jù)

當(dāng)我們需要通過 Ajax 請求遠(yuǎn)程數(shù)據(jù)時(shí)，應(yīng)該在整個(gè)組件構(gòu)造完成并掛載完畢后再發(fā)起請求。

如果我們在 created 或 mounted 階段就直接請求數(shù)據(jù)，那么可能會(huì)遇到一些問題，比如請求數(shù)據(jù)需要一些時(shí)間，但是在這段時(shí)間內(nèi)，組件已經(jīng)進(jìn)行了處理，數(shù)據(jù)返回后需要重新處理組件，這樣會(huì)帶來一些不必要的性能損失。

因此，使用 onMounted 鉤子函數(shù)可以確保我們在組件完全掛載到 DOM 樹上后再進(jìn)行數(shù)據(jù)請求。

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 元素

當(dāng)我們需要使用原生 API 對 DOM 元素進(jìn)行操作時(shí)，需要等到它掛載完成后再進(jìn)行操作。

使用 onMounted 鉤子函數(shù)，可以確保 DOM 元素已經(jīng)完全掛載到頁面上后再進(jìn)行操作，這樣可以避免操作未掛載完畢的元素，避免出現(xiàn)一些未知的問題。

import { onMounted } from "vue";

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

3. 優(yōu)化組件初始化效率

在組件的 created 和 mounted 階段，Vue.js 都會(huì)執(zhí)行大量的代碼，包括響應(yīng)式數(shù)據(jù)的掛載等。

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

四、onMounted方法注意事項(xiàng)

使用 onMounted 鉤子函數(shù)時(shí)需要注意以下幾點(diǎn)：

1. onMounted 鉤子函數(shù)只能在 setup 函數(shù)中調(diào)用；

2. setup 函數(shù)必須返回一個(gè)對象，否則 onMounted 鉤子函數(shù)無法調(diào)用；

3. 避免在 onMounted 鉤子函數(shù)中頻繁調(diào)用 setState 等方法，這會(huì)導(dǎo)致組件頻繁更新，降低性能；

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