如何使用Vue3的onMounted鉤子函數(shù)及vue3中onMounted的用法詳解
一、onMounted的前世今生
1.1、onMounted是什么
onMounted鉤子函數(shù)在組件實(shí)例被成功掛載后調(diào)用，此時(shí)你可以訪問到 DOM 元素。它返回一個(gè)函數(shù)，可以用于在組件卸載時(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鉤子的前身實(shí)際上是mounted生命周期鉤子。在Vue 2的Options API中，生命周期鉤子是作為組件的選項(xiàng)來定義的。
在Vue 2的組件中，mounted鉤子用于執(zhí)行那些需要在組件實(shí)例掛載到DOM之后運(yùn)行的代碼，這通常包括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作為組件的一個(gè)選項(xiàng)來執(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ǔ)用法
這個(gè)沒什么可說的，和watch、interval語法結(jié)構(gòu)一樣。
import { onMounted, ref } from 'vue';
export default {
setup() {
const count = ref(0);
onMounted(() => {
// 在這里可以執(zhí)行DOM操作或數(shù)據(jù)請求
console.log('組件已掛載');
});
// 也可以返回一個(gè)函數(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('請求錯(cuò)誤:', error);
}
});
return {
data
};
}
};1.3.3、并行執(zhí)行多個(gè)異步操作
onMounted 也常用于執(zhí)行并行異步操作，也可以發(fā)起網(wǎng)絡(luò)請求。但據(jù)我實(shí)際使用的經(jīng)歷來看，異步操作能在首屏加載、大量圖片等資源加載時(shí)發(fā)揮不錯(cuò)的作用。
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)的任何錯(cuò)誤
console.error('請求錯(cuò)誤:', error);
});
});
// 返回響應(yīng)式狀態(tài)供模板或其他Composition API使用
return {
data,
data2,
data3,
data4
};
}
};1.3.4、執(zhí)行一次性副作用
如果你需要執(zhí)行一次性的副作用（side effect），onMounted 是一個(gè)理想的地方。
"副作用"（side effect）是指函數(shù)在執(zhí)行時(shí)除了返回值之外對外部環(huán)境產(chǎn)生的影響。這些影響可能包括但不限于：
- 修改全局變量：改變在函數(shù)外部定義的變量的值。
- 執(zhí)行I/O操作：如讀寫文件、網(wǎng)絡(luò)請求、控制臺(tái)日志輸出等。
- 修改外部對象或數(shù)組：影響傳入函數(shù)的參數(shù)對象或數(shù)組的狀態(tài)。
- 觸發(fā)事件：如點(diǎn)擊事件、網(wǎng)絡(luò)事件等。
- 定時(shí)器設(shè)置：設(shè)置 setTimeout 或 setInterval。
這里是利用onMounted鉤子函數(shù)在組件實(shí)例被成功掛載后調(diào)用的時(shí)序特性，這個(gè)組件實(shí)例已經(jīng)掛載，頁面首次渲染的時(shí)機(jī)。在這個(gè)階段可以執(zhí)行很多操作。
import { onMounted } from 'vue';
export default {
setup() {
onMounted(() => {
// 執(zhí)行一次性副作用
console.log('這是一個(gè)一次性副作用');
});
return {};
}
};1.3.5、清理工作（較少用）
onMounted 提供的函數(shù)可以用于注冊清理工作，這在處理定時(shí)器或監(jiān)聽器時(shí)非常有用。不過在onMounted清理的比較少，我見到的在onBeforeUnmount鉤子函數(shù)清理定時(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('定時(shí)器已清理');
};
});
return {
count,
cleanup
};
}
};1.3.6、組合使用（特定情況用）
onMounted 可以與Vue 3的其他Composition API一起使用，以實(shí)現(xiàn)復(fù)雜的邏輯。這里主要是改變了watch的啟動(dòng)時(shí)機(jī)，本來是在setup階段啟動(dòng)watch偵聽器，但是這樣寫就變成了在onMounted階段啟動(dòng)偵聽器。
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那樣要寫在某一個(gè)對象里面。但一般不推薦多次使用，這相當(dāng)于多個(gè)onMounted異步執(zhí)行操作，分散地寫只會(huì)降低long terms的可維護(hù)性，降低可讀性，哪怕是為了迎合和充分利用composition API的特點(diǎn)，我也覺得弊大于利。
function task1() {
// 初始化任務(wù)1
}
function task2() {
// 初始化任務(wù)2
}
onMounted(task1);
onMounted(task2);二、總結(jié)
onMounted作為vue3中最常用的鉤子函數(shù)之一，能夠靈活、隨心應(yīng)手的使用是每個(gè)Vue開發(fā)者的必修課，同時(shí)根據(jù)其不同寫法的特性，來選擇最合適最有利于維護(hù)的寫法。
到此這篇關(guān)于如何使用Vue3的onMounted鉤子函數(shù)及vue3中onMounted的用法詳解的文章就介紹到這了,更多相關(guān)Vue3 onMounted鉤子函數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
使用vue實(shí)現(xiàn)簡單鍵盤的示例(支持移動(dòng)端和pc端)
這篇文章主要介紹了使用vue實(shí)現(xiàn)簡單鍵盤的示例(支持移動(dòng)端和pc端)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12
Mint UI組件庫CheckList使用及踩坑總結(jié)
這篇文章主要介紹了Mint UI組件庫CheckList使用及踩坑總結(jié)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要介紹了?vue利用openlayers加載天地圖和高德地圖，下文章主要由兩部分完成openlayers加載天地圖和加載高德地圖，下面來看看詳細(xì)內(nèi)容吧,需要的朋友可以參考一下，希望對大家有所幫助2021-11-11
這篇文章主要介紹了vue使用el-select下拉框匹配不到值的問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章說明了如何使用Vue去刷新當(dāng)前頁面的多種方法實(shí)例,有完成的代碼提供參考,希望對你有所幫助2021-06-06
vue中對監(jiān)聽esc事件和退出全屏問題的解決方案
這篇文章主要介紹了vue中對監(jiān)聽esc事件和退出全屏問題的解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
使用elementUI實(shí)現(xiàn)將圖片上傳到本地的示例
今天小編就為大家分享一篇使用elementUI實(shí)現(xiàn)將圖片上傳到本地的示例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
詳解vue后臺(tái)系統(tǒng)登錄態(tài)管理
這篇文章主要介紹了vue后臺(tái)系統(tǒng)登錄管理，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
最近在學(xué)習(xí)Vue教程,下面這篇文章主要給大家介紹了關(guān)于vue中api統(tǒng)一管理的那些事,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-04-04
Vue3監(jiān)聽屬性與Computed的區(qū)別詳解
在 Vue 3 中,watch 和 computed 都是非常重要的概念,它們都可以用于觀察和響應(yīng)數(shù)據(jù)的變化,但在使用場景和原理上存在明顯的區(qū)別,本文將詳細(xì)解析 Vue 3 中監(jiān)聽屬性 (watch) 和計(jì)算屬性 (computed) 的區(qū)別,需要的朋友可以參考下2024-02-02