如何使用Vue3的onMounted鉤子函數(shù)及vue3中onMounted的用法詳解
一、onMounted的前世今生
1.1、onMounted是什么
onMounted鉤子函數(shù)在組件實例被成功掛載后調(diào)用，此時你可以訪問到 DOM 元素。它返回一個函數(shù)，可以用于在組件卸載時進(jìn)行清理（比如Interval等）。
可以說onMounted鉤子函數(shù)是最常用的鉤子函數(shù)了，玩轉(zhuǎn)onMounted鉤子函數(shù)，是寫出優(yōu)雅的vue前端代碼的關(guān)鍵步驟。
1.2、onMounted在vue2中的前身
1.2.1、vue2中的onMounted
在Vue 2中，onMounted鉤子的前身實際上是mounted生命周期鉤子。在Vue 2的Options API中，生命周期鉤子是作為組件的選項來定義的。
在Vue 2的組件中，mounted鉤子用于執(zhí)行那些需要在組件實例掛載到DOM之后運行的代碼，這通常包括DOM操作、數(shù)據(jù)請求等。
比如：
export default {
data() {
return {
// 組件的數(shù)據(jù)
};
},
mounted() {
// 組件掛載完成后的副作用操作
console.log('組件已掛載到DOM');
// 可以執(zhí)行DOM操作或數(shù)據(jù)請求等
},
methods: {
// 組件的方法
}
};1.2.2、Vue2與Vue3的onMounted對比
- Vue 2：使用mounted作為組件的一個選項來執(zhí)行掛載后的代碼。
- Vue 3：使用onMounted作為Composition API的鉤子來執(zhí)行掛載后的代碼。
在Vue 3中，onMounted是Composition API的一部分，它提供了更靈活的方式來組織組件的邏輯。Vue 3的onMounted與Vue 2的mounted在功能上相似，都是在組件掛載完成后執(zhí)行，但onMounted作為Composition API的一部分，可以更好地與其它Composition API一起使用，提供更細(xì)粒度的控制和更好的組合性。
1.3、vue3中onMounted的用法
1.3.1、基礎(chǔ)用法
這個沒什么可說的，和watch、interval語法結(jié)構(gòu)一樣。
import { onMounted, ref } from 'vue';
export default {
setup() {
const count = ref(0);
onMounted(() => {
// 在這里可以執(zhí)行DOM操作或數(shù)據(jù)請求
console.log('組件已掛載');
});
// 也可以返回一個函數(shù)進(jìn)行清理
return {
count
};
}
};1.3.2、順序執(zhí)行異步操作
onMounted 也常用于執(zhí)行順序異步操作，如發(fā)起網(wǎng)絡(luò)請求。
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、并行執(zhí)行多個異步操作
onMounted 也常用于執(zhí)行并行異步操作，也可以發(fā)起網(wǎng)絡(luò)請求。但據(jù)我實際使用的經(jīng)歷來看，異步操作能在首屏加載、大量圖片等資源加載時發(fā)揮不錯的作用。
import { ref, onMounted } from 'vue';
import axios from 'axios';
export default {
setup() {
// 聲明響應(yīng)式數(shù)據(jù)引用
const data = ref(null);
const data2 = ref(null);
const data3 = ref(null);
const data4 = ref(null);
onMounted(async () => {
// 使用Promise.all來處理并發(fā)的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 => {
// 所有請求成功完成后，更新響應(yīng)式數(shù)據(jù)
data.value = responses[0].data;
data2.value = responses[1].data;
data3.value = responses[2].data;
data4.value = responses[3].data;
// 這里可以放置所有異步任務(wù)完成后的代碼...
}).catch(error => {
// 處理請求中出現(xiàn)的任何錯誤
console.error('請求錯誤:', error);
});
});
// 返回響應(yīng)式狀態(tài)供模板或其他Composition API使用
return {
data,
data2,
data3,
data4
};
}
};1.3.4、執(zhí)行一次性副作用
如果你需要執(zhí)行一次性的副作用（side effect），onMounted 是一個理想的地方。
"副作用"（side effect）是指函數(shù)在執(zhí)行時除了返回值之外對外部環(huán)境產(chǎn)生的影響。這些影響可能包括但不限于：
- 修改全局變量：改變在函數(shù)外部定義的變量的值。
- 執(zhí)行I/O操作：如讀寫文件、網(wǎng)絡(luò)請求、控制臺日志輸出等。
- 修改外部對象或數(shù)組：影響傳入函數(shù)的參數(shù)對象或數(shù)組的狀態(tài)。
- 觸發(fā)事件：如點擊事件、網(wǎng)絡(luò)事件等。
- 定時器設(shè)置：設(shè)置 setTimeout 或 setInterval。
這里是利用onMounted鉤子函數(shù)在組件實例被成功掛載后調(diào)用的時序特性，這個組件實例已經(jīng)掛載，頁面首次渲染的時機。在這個階段可以執(zhí)行很多操作。
import { onMounted } from 'vue';
export default {
setup() {
onMounted(() => {
// 執(zhí)行一次性副作用
console.log('這是一個一次性副作用');
});
return {};
}
};1.3.5、清理工作（較少用）
onMounted 提供的函數(shù)可以用于注冊清理工作，這在處理定時器或監(jiān)聽器時非常有用。不過在onMounted清理的比較少，我見到的在onBeforeUnmount鉤子函數(shù)清理定時器、監(jiān)聽器的比較多。
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一起使用，以實現(xiàn)復(fù)雜的邏輯。這里主要是改變了watch的啟動時機，本來是在setup階段啟動watch偵聽器，但是這樣寫就變成了在onMounted階段啟動偵聽器。
import { onMounted, ref, watch } from 'vue';
export default {
setup() {
const data = ref(null);
onMounted(() => {
// 可以組合使用其他Composition API
watch(data, (newValue, oldValue) => {
console.log(`數(shù)據(jù)從 ${oldValue} 變更為 ${newValue}`);
});
});
// 模擬數(shù)據(jù)變化
setTimeout(() => {
data.value = { name: '新數(shù)據(jù)' };
}, 2000);
return {
data
};
}
};1.3.7、直接將封裝好的函數(shù)傳遞給onMounted鉤子函數(shù)調(diào)用
Vue3中onMounted可以重復(fù)使用，多次使用，并不是像vue2那樣要寫在某一個對象里面。但一般不推薦多次使用，這相當(dāng)于多個onMounted異步執(zhí)行操作，分散地寫只會降低long terms的可維護(hù)性，降低可讀性，哪怕是為了迎合和充分利用composition API的特點，我也覺得弊大于利。
function task1() {
// 初始化任務(wù)1
}
function task2() {
// 初始化任務(wù)2
}
onMounted(task1);
onMounted(task2);二、總結(jié)
onMounted作為vue3中最常用的鉤子函數(shù)之一，能夠靈活、隨心應(yīng)手的使用是每個Vue開發(fā)者的必修課，同時根據(jù)其不同寫法的特性，來選擇最合適最有利于維護(hù)的寫法。
到此這篇關(guān)于如何使用Vue3的onMounted鉤子函數(shù)及vue3中onMounted的用法詳解的文章就介紹到這了,更多相關(guān)Vue3 onMounted鉤子函數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue的路由映射問題及解決方案,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-10-10
vue 3.x 中mixin封裝公用方法應(yīng)用方式
這篇文章主要介紹了vue 3.x 中mixin封裝公用方法應(yīng)用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
組件是Vue.js最強大的功能之一。組件可以擴(kuò)展HTML元素，封裝可重用的代碼。這篇文章通過實例代碼給大家介紹了Vue加載組件、動態(tài)加載組件的幾種方式，需要的朋友參考下吧2018-08-08
Vue Element 分組+多選+可搜索Select選擇器實現(xiàn)示例
這篇文章主要介紹了Vue Element 分組+多選+可搜索Select選擇器實現(xiàn)示例,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要介紹了vue中的provide / inject 有什么用處,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-11-11
這篇文章主要介紹了詳解新手使用vue-router傳參時注意事項，詳細(xì)的介紹了幾種常見錯誤，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
Vue.js?的計算屬性和偵聽器詳解(提升數(shù)據(jù)處理與交互的關(guān)鍵工具)
在Vue.js開發(fā)中,計算屬性與偵聽器是極為關(guān)鍵的特性,它們極大地提升了數(shù)據(jù)處理與交互邏輯實現(xiàn)的便捷性和高效性,本文給大家介紹Vue.js?的計算屬性和偵聽器：提升數(shù)據(jù)處理與交互的關(guān)鍵工具,感興趣的朋友一起看看吧2025-04-04
這篇文章主要介紹了vue中computed和watch的綜合運用實例,主要需求是點擊按鈕實現(xiàn)天氣的切換效果結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-04-04
本文主要介紹了vue單頁面應(yīng)用部署配置詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
vue調(diào)用微信JSDK 掃一掃，相冊等需要注意的事項
這篇文章主要介紹了vue調(diào)用微信JSDK 掃一掃，相冊等需要注意的事項，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01