在Vue生命周期中,mounted()方法是一個非常重要的生命周期函數。它表示Vue實例已經創建完成,可以訪問DOM元素,進行DOM操作或者進行數據更新。在mounted()方法中,可以進行與DOM相關的操作或者是發送異步請求獲取數據,并將數據渲染到頁面上。
mounted() { this.getData() console.log(this.$el) // 獲取掛載的元素 }
在mounted()方法中,可以獲取到被Vue實例掛載的元素,通過this.$el可以獲取到當前Vue實例所掛載的DOM元素,我們可以通過這個屬性獲取元素的相關信息,進行一些DOM的操作。
mounted() { this.getData() const list = this.$el.querySelector('.list') console.log(list.innerHTML) // 獲取列表項的內容 }
除了獲取掛載元素,還可以在mounted()方法中向后臺發送請求獲取數據,并將數據渲染到頁面上。這里可以使用Vue中的異步操作,例如:使用axios發送get請求,獲取后臺返回的數據。
mounted() { axios.get('/api/data').then(res =>{ this.dataList = res.data // 綁定獲取到的數據 }) }
使用mounted()方法可以讓Vue實例在創建后立即執行。但是需要注意的是,在mounted()方法中需要注意異步請求或者DOM操作的執行時機,需要保證DOM加載完成后再進行相關操作。