Vue中有一個非常重要的生命周期鉤子函數,它就是mounted。 在Vue實例被掛載到DOM元素上時,mounted函數會被自動調用。
new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
},
mounted: function () {
// 頁面上的DOM元素已經渲染完成,可以開始做一些視圖和數據的初始化操作
console.log('mounted')
},
})
在上面的代碼中,我們創建了一個Vue實例,并指定它要掛載的DOM元素是id為“app”的元素。由于我們在mounted生命周期鉤子函數中打印了一條信息到控制臺,所以當Vue實例被掛載到DOM元素上時,就會自動執行這個函數。
需要注意的是,mounted生命周期鉤子函數只會在Vue實例掛載到DOM元素上時被調用一次。 這意味著在Vue實例更新后,mounted函數不會再次被調用。
new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
},
mounted: function () {
console.log('mounted')
},
methods: {
changeMessage: function () {
this.message = 'Vue is awesome!'
}
}
})
在上面的代碼中,我們添加了一個changeMessage方法,它會在點擊按鈕時改變message屬性的值。需要注意的是,當我們調用這個方法時,mounted函數不會再次被調用,因為我們只是更新了Vue實例的數據,而沒有重新掛載它到DOM元素上。
那么,如果我們想要在每次數據更新后都執行一些代碼,應該怎么做呢?答案是使用updated生命周期鉤子函數。
new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
},
mounted: function () {
console.log('mounted')
},
updated: function () {
console.log('updated')
},
methods: {
changeMessage: function () {
this.message = 'Vue is awesome!'
}
}
})
在上面的代碼中,我們添加了一個updated生命周期鉤子函數。它會在每次數據更新時被自動調用。
總之,在Vue中,生命周期鉤子函數是非常重要且常用的特性,它可以讓我們在不同的階段執行特定的代碼。
上一篇vue 監聽頁面渲染