遇到的問題

最近在開發一個Vue的專案，好幾個頁面都有用到一個 頁面樓層滑動的元件，我就直接封裝成了一個，但是遇到一個bug，就是我需要得到這個元件的offsetTop，然後頁面滾動到這個位置的時候，就設定position屬性為fixed，讓他固定在螢幕上。問題是當我在mounted鉤子函式中獲取offsetTop的時候，在新開的頁籤中開啟頁面，會得到錯誤的offsetTop，但是在當前頁面重新整理，就不會有問題。

定位問題

後來查到問題，就是載入的問題，新視窗開啟圖片，預設是沒有帶快取的，圖片是GET請求，是非同步的，js執行的肯定比圖片GET要快，所以當執行mounted鉤子函式的時候，圖片還沒有全部載入完，這時候就會得到一個錯誤的offsetTop。

解決方案

給圖片加上ref屬性，並在那個元件裡的mounted鉤子函式中寫，

this.$refs.img.onload = ()=>{
    Bus.$emit('loadImgSuccess')
}

這裡的Bus是用的EventBus，兩個元件中事件響應的辦法，不懂或者感興趣的可以點這裡EventBus。
需要得到offsetTop的元件裡面

Bus.$on('loadImgSuccess', () => {
    var offsetTop = this.$refs.dom.offsetTop  
})

這時候就可以確認每次不管是頁面新開啟還是當前頁重新整理都可以得到正確的offsetTop。