目錄

一、onMounted的前世今生

1.1、onMounted是什么

1.2、onMounted在vue2中的前身

1.2.1、vue2中的onMounted

1.2.2、Vue2與Vue3的onMounted對比

1.3、vue3中onMounted的用法

1.3.1、基礎用法

1.3.2、順序執行異步操作

1.3.3、并行執行多個異步操作

1.3.4、執行一次性副作用

1.3.5、清理工作（較少用）

1.3.6、組合使用（特定情況用）

1.3.7、直接將封裝好的函數傳遞給onMounted鉤子函數調用

二、總結

---

一、onMounted的前世今生

1.1、onMounted是什么

????????onMounted鉤子函數在組件實例被成功掛載后調用，此時你可以訪問到 DOM 元素。它返回一個函數，可以用于在組件卸載時進行清理。

? ? ? ? 可以說onMounted鉤子函數是最常用的鉤子函數了，玩轉onMounted鉤子函數，是寫出優雅的vue前端代碼的關鍵步驟。

1.2、onMounted在vue2中的前身

1.2.1、vue2中的onMounted

????????在Vue 2中，onMounted鉤子的前身實際上是mounted生命周期鉤子。在Vue 2的Options API中，生命周期鉤子是作為組件的選項來定義的。

????????在Vue 2的組件中，mounted鉤子用于執行那些需要在組件實例掛載到DOM之后運行的代碼，這通常包括DOM操作、數據請求等。

????????比如：

export default {data() {return {// 組件的數據};},mounted() {// 組件掛載完成后的副作用操作console.log('組件已掛載到DOM');// 可以執行DOM操作或數據請求等},methods: {// 組件的方法}
};

1.2.2、Vue2與Vue3的onMounted對比

• Vue 2：使用mounted作為組件的一個選項來執行掛載后的代碼。
• Vue 3：使用onMounted作為Composition API的鉤子來執行掛載后的代碼。

????????在Vue 3中，onMounted是Composition API的一部分，它提供了更靈活的方式來組織組件的邏輯。Vue 3的onMounted與Vue 2的mounted在功能上相似，都是在組件掛載完成后執行，但onMounted作為Composition API的一部分，可以更好地與其它Composition API一起使用，提供更細粒度的控制和更好的組合性。

1.3、vue3中onMounted的用法

1.3.1、基礎用法

? ? ? ? 這個沒什么可說的，和watch、interval語法結構一樣。

import { onMounted, ref } from 'vue';export default {setup() {const count = ref(0);onMounted(() => {// 在這里可以執行DOM操作或數據請求console.log('組件已掛載');});// 也可以返回一個函數進行清理return {count};}
};

1.3.2、順序執行異步操作

????????onMounted 也常用于執行順序異步操作，如發起網絡請求。

import { onMounted, ref } from 'vue';
import axios from 'axios';export default {setup() {const data = ref(null);onMounted(async () => {try {const response = await axios.get('https://api.example.com/data');data.value = response.data;const response2 = await axios.get('https://api.example.com/data2');data.value2 = response2.data;const response3 = await axios.get('https://api.example.com/data3');data.value3 = response3.data;const response4 = await axios.get('https://api.example.com/data4');data.value4 = response4.data;// ...更多的異步操作} catch (error) {console.error('請求錯誤:', error);}});return {data};}
};

1.3.3、并行執行多個異步操作

????????onMounted 也常用于執行并行異步操作，也可以發起網絡請求。但據我實際使用的經歷來看，異步操作能在首屏加載、大量圖片等資源加載時發揮不錯的作用。

import { ref, onMounted } from 'vue';
import axios from 'axios';export default {setup() {// 聲明響應式數據引用const data = ref(null);const data2 = ref(null);const data3 = ref(null);const data4 = ref(null);onMounted(async () => {// 使用Promise.all來處理并發的axios請求await Promise.all([axios.get('https://api.example.com/data'),axios.get('https://api.example.com/data2'),axios.get('https://api.example.com/data3'),axios.get('https://api.example.com/data4')]).then(responses => {// 所有請求成功完成后，更新響應式數據data.value = responses[0].data;data2.value = responses[1].data;data3.value = responses[2].data;data4.value = responses[3].data;// 這里可以放置所有異步任務完成后的代碼...}).catch(error => {// 處理請求中出現的任何錯誤console.error('請求錯誤:', error);});});// 返回響應式狀態供模板或其他Composition API使用return {data,data2,data3,data4};}
};

1.3.4、執行一次性副作用

????????如果你需要執行一次性的副作用（side effect），onMounted 是一個理想的地方。

????????"副作用"（side effect）是指函數在執行時除了返回值之外對外部環境產生的影響。這些影響可能包括但不限于：

• 修改全局變量：改變在函數外部定義的變量的值。
• 執行I/O操作：如讀寫文件、網絡請求、控制臺日志輸出等。
• 修改外部對象或數組：影響傳入函數的參數對象或數組的狀態。
• 觸發事件：如點擊事件、網絡事件等。
• 定時器設置：設置 setTimeout 或 setInterval。

? ? ? ? 這里是利用onMounted鉤子函數在組件實例被成功掛載后調用的時序特性，這個組件實例已經掛載，頁面首次渲染的時機。在這個階段可以執行很多操作。

import { onMounted } from 'vue';export default {setup() {onMounted(() => {// 執行一次性副作用console.log('這是一個一次性副作用');});return {};}
};

1.3.5、清理工作（較少用）

????????onMounted 提供的函數可以用于注冊清理工作，這在處理定時器或監聽器時非常有用。不過在onMounted清理的比較少，我見到的在onBeforeUnmount鉤子函數清理定時器、監聽器的比較多。

import { onMounted, ref } from 'vue';export default {setup() {const count = ref(0);const intervalId = setInterval(() => {count.value++;}, 1000);// 注冊清理工作const cleanup = onMounted(() => {return () => {clearInterval(intervalId);console.log('定時器已清理');};});return {count,cleanup};}
};

1.3.6、組合使用（特定情況用）

????????onMounted 可以與Vue 3的其他Composition API一起使用，以實現復雜的邏輯。這里主要是改變了watch的啟動時機，本來是在setup階段啟動watch偵聽器，但是這樣寫就變成了在onMounted階段啟動偵聽器。

import { onMounted, ref, watch } from 'vue';export default {setup() {const data = ref(null);onMounted(() => {// 可以組合使用其他Composition APIwatch(data, (newValue, oldValue) => {console.log(`數據從 ${oldValue} 變更為 ${newValue}`);});});// 模擬數據變化setTimeout(() => {data.value = { name: '新數據' };}, 2000);return {data};}
};

1.3.7、直接將封裝好的函數傳遞給onMounted鉤子函數調用

? ? ? ? Vue3中onMounted可以重復使用，多次使用，并不是像vue2那樣要寫在某一個對象里面。但一般不推薦多次使用，這相當于多個onMounted異步執行操作，分散地寫只會增加long terms的可維護性，降低可讀性，哪怕是為了迎合和充分利用composition API的特點，我也覺得弊大于利。

function task1() {// 初始化任務1
}function task2() {// 初始化任務2
}onMounted(task1);
onMounted(task2);

二、總結

????????onMounted作為vue3中最常用的鉤子函數之一，能夠靈活、隨心應手的使用是每個Vue開發者的必修課，同時根據其不同寫法的特性，來選擇最合適最有利于維護的寫法。

????????博客不應該只有代碼和解決方案，重點應該在于給出解決方案的同時分享思維模式，只有思維才能可持續地解決問題，只有思維才是真正值得學習和分享的核心要素。如果這篇博客能給您帶來一點幫助，麻煩您點個贊支持一下，還可以收藏起來以備不時之需，有疑問和錯誤歡迎在評論區指出~