在 Vue 中,mounted 生命周期鉤子函數是組件掛載到 DOM 后調用的。這個時候,Vue 實例已經完成了編譯、解析組件的模板,并將其插入到 DOM 中。此時,組件已經被創建并且可以訪問到 DOM元素以及其它相關的數據。
在 mounted 鉤子函數中,通常用于執行一些需要訪問 DOM 元素的操作,例如調用第三方庫、綁定事件處理器、獲取數據等等。因為此時 DOM 元素已經被掛載完畢,可以直接通過 document 或相關的 API 進行操作。
mounted() {
// 初始化第三方庫
var myLibrary = new MyLibrary();
// 獲取 DOM 元素
var elem = document.getElementById('my-elem');
// 綁定事件處理器
elem.addEventListener('click', this.handleClick);
// 請求數據
axios.get('/api/data').then(response =>{
this.data = response.data;
});
}
另外,需要注意的是,在使用 mounted 鉤子函數時,可能會存在一些異步更新數據的情況。如果需要在 DOM 元素更新之后執行一些邏輯操作,可以使用 Vue.nextTick 方法,它是在 DOM 更新之后執行回調函數的。
mounted() {
// 等待 DOM 元素更新
Vue.nextTick(() =>{
// 獲取實際高度
var height = document.getElementById('my-elem').offsetHeight;
console.log('實際高度:' + height);
});
}
總的來說,mounted 生命周期鉤子函數是在 Vue 實例掛載到 DOM 后觸發的,可以在此時進行一些需要訪問 DOM 元素的操作;如果需要在更新數據之后執行一些邏輯操作,建議使用 Vue.nextTick 方法。