mounted是Vue中一個(gè)重要的生命周期鉤子函數(shù)，它在實(shí)例被掛載到 DOM 后調(diào)用，即當(dāng)Vue實(shí)例的 el 屬性所指向的元素被新創(chuàng)建的 vm.$el 替換后，掛載工作就完成了。在此時(shí)，Vue實(shí)例已經(jīng)準(zhǔn)備好渲染頁(yè)面了。

在mounted鉤子函數(shù)中，我們可以訪問(wèn)到Vue實(shí)例中的所有DOM元素，也可以進(jìn)行一些異步操作，例如獲取遠(yuǎn)程數(shù)據(jù)、操作 DOM 等。此時(shí)，Vue已經(jīng)將對(duì)象屬性轉(zhuǎn)換為 getter/setter，因此屬性更新將觸發(fā)相應(yīng)的視圖更新。

以下是使用mounted鉤子函數(shù)的代碼實(shí)例：

new Vue({
el: '#app',
data() {
return {
}
},
mounted() {
// 獲取元素
const elem = document.getElementById("elem");
// 操作元素
elem.innerHTML = "Hello, World!";
// 發(fā)起異步請(qǐng)求
fetch(`https://api.example.com/users`)
.then(response =>response.json())
.then(data =>{
this.users = data;
});
}
})

在上面的代碼中，我們使用了mounted鉤子函數(shù)來(lái)獲取到id為elem的元素，并將其內(nèi)容修改為"Hello, World!"。接下來(lái)，我們發(fā)起了一個(gè)異步請(qǐng)求，獲取用戶信息并將其更新到Vue實(shí)例的data中。由于Vue的響應(yīng)式系統(tǒng)，當(dāng)數(shù)據(jù)更新時(shí)，相應(yīng)的視圖也會(huì)自動(dòng)更新。

需要注意的是，mounted鉤子函數(shù)只會(huì)在組件渲染完成后執(zhí)行一次，因此在頁(yè)面被刷新或組件被復(fù)用時(shí)，不會(huì)再次執(zhí)行mounted函數(shù)。如果需要在組件每次被復(fù)用時(shí)執(zhí)行一些操作，可以使用activated鉤子函數(shù)。同時(shí)，如果需要在掛載之前進(jìn)行一些操作，可以使用beforeMount鉤子函數(shù)。

總體來(lái)說(shuō)，mounted鉤子函數(shù)為我們提供了一個(gè)方便的接口，可以在DOM元素已經(jīng)渲染完畢之后，進(jìn)行一些異步操作等功能。在實(shí)際應(yīng)用中，我們經(jīng)常會(huì)用到mounted鉤子函數(shù)來(lái)獲取數(shù)據(jù)、初始化組件狀態(tài)等。