Vue中mounted鉤子函數獲取節點高度出錯

遇到的問題

最近在開發一個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。