在JavaScript中，當瀏覽器成功加載一個頁面時，會觸發onload事件，通知JavaScript代碼可以開始執行了。在Vue中，onload事件同樣是一種非常重要的事件。

mounted() {
this.$nextTick(function () {
window.addEventListener('load', this.onloadHandler)
})
},
methods: {
onloadHandler() {
console.log('頁面已經加載完畢！')
}
}

以上代碼展示了如何在Vue組件中監聽onload事件。在mounted生命周期鉤子中添加監聽器，并在頁面完全加載完成之后觸發onloadHandler()方法。你可以在該方法中執行任何你想要執行的代碼。

onload事件通常是在頁面的全部資源（包括圖片、CSS、JS等）都完成加載之后才會觸發。在Vue中，我們可以在onload事件中操作已經加載完成的DOM元素。

mounted() {
this.$nextTick(function () {
window.addEventListener('load', this.onloadHandler)
})
},
methods: {
onloadHandler() {
const logo = document.querySelector('.logo')
logo.classList.add('opacity-animation')
}
}

以上代碼展示了如何在onload事件中添加CSS動畫。我們從文檔中查詢到頁面中的.logo元素，并對其添加.opacity-animation class。在實際開發中你可以根據需要使用CSS、JS或其他技術對已經加載完成的DOM元素進行操作。

onload事件也是一個非常重要的事件，因為它在頁面完全加載完畢之后才會觸發，這意味著我們可以在該事件中對網頁進行復雜的操作，而無需擔心頁面還沒有加載完成而導致的問題。

然而，需要注意的是，如果一個組件有多個子組件，那么onload事件可能會導致子組件的onload事件重復觸發。為了避免這種情況，可以在子組件中使用Vue的nextTick()方法。

mounted() {
this.$nextTick(function() {
window.addEventListener('load', this.onloadHandler)
})
},
methods: {
onloadHandler() {
console.log('頁面已經加載完畢!')
}
}

mounted() {
this.$nextTick(function() {
window.addEventListener('load', this.onloadHandler, true)
})
},
methods: {
onloadHandler() {
console.log('頁面已經加載完畢!')
}
}

以上代碼展示了兩種避免子組件重復觸發onload事件的方法。第一種方法是在mounted生命周期鉤子中使用Vue的nextTick()方法來監聽onload事件。第二種方法是在事件偵聽器中使用true參數。

總的來說，onload事件是一個非常重要的事件，在Vue中也是一種非常常見的事件。同時，需要注意避免子組件重復觸發該事件。