Vue中的mounted鉤子是一個生命周期函數。它在Vue實例掛載到真實的DOM元素上后觸發,常用于初始化頁面。通常,在mounted函數中我們會進行一些DOM操作、設置定時器或者請求數據等操作。
舉個例子,在mounted中,我們常常會使用$refs獲取DOM相關的信息。比如下面這段代碼:
export default {
mounted() {
console.log(this.$refs.myInput.value)
}
}
在上面的代碼中,我們獲取了一個名為“myInput”的DOM元素,并輸出了它的value。
除了獲取DOM元素的信息,我們還常常在mounted中進行數據請求以及設置定時器等操作。如下所示:
export default {
data() {
return {
list: []
}
},
mounted() {
axios.get('/api/list').then(res =>{
this.list = res.data
})
setInterval(() =>{
console.log('update')
}, 1000)
}
}
上述代碼中,我們首先在mounted函數中使用axios請求了后臺的數據,將返回結果存儲到data中的list中,然后使用setInterval函數每隔1s打印一次“update”。
總的來說,mounted是Vue生命周期中重要的一個階段,我們可以在這個階段進行各種頁面初始化和數據請求等操作。不過需要注意的是,在mounted中進行重量級的操作可能會影響頁面性能,因此需要根據實際需要進行權衡。