在 Vue.js 應(yīng)用中，組件的 mounted 生命周期鉤子函數(shù)在組件實(shí)例被掛載到 DOM 上后被調(diào)用。這是一個(gè)重要的生命周期函數(shù)，通常被用來(lái)執(zhí)行一些需要在組件掛載后進(jìn)行的操作，例如在組件中調(diào)用接口、初始化第三方庫(kù)等等。

在這個(gè)時(shí)候，組件實(shí)例的模板已經(jīng)被渲染成真實(shí)的 DOM，并且可以通過(guò)組件實(shí)例中的 this.$el 訪問(wèn)到。因此，我們可以在 mounted 中進(jìn)行一些 DOM 操作、綁定事件以及調(diào)用第三方庫(kù)等操作。

Vue.component('my-component', {
mounted: function () {
// 訪問(wèn)組件實(shí)例的根元素
console.log(this.$el);
// 綁定事件
this.$el.addEventListener('click', function () {
// do something
});
// 調(diào)用第三方庫(kù)
new thirdPartyLib(this.$el);
}
});

需要注意的是，如果在組件的父組件中使用 v-if 或者 v-show 控制子組件的顯隱，那么當(dāng)條件不滿足時(shí)，子組件會(huì)被銷(xiāo)毀，此時(shí) mounted 生命周期鉤子函數(shù)不會(huì)被再次調(diào)用。如果需要在組件顯示時(shí)重復(fù)執(zhí)行一些操作，可以使用 activated 生命周期鉤子函數(shù)。