onMounted方法詳解

一、什么是onMounted方法

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

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

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

二、onMounted方法用法

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

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

import { onMounted } from "vue";

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

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

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

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

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

因此，使用 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)行操作時，需要等到它掛載完成后再進(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 都會執(zhí)行大量的代碼，包括響應(yīng)式數(shù)據(jù)的掛載等。

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

四、onMounted方法注意事項

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

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

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

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

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