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