vue在munted中獲取dom高度不准確的問題

今天遇到這么個問題：

在組件中給div設置了默認的高度100px，然后父組件也會傳入樣式120px，在mounted中獲取div的高度會獲取到默認的高100px而不是渲染的高120px;就算加上$nextTick也是一樣。

data () {
    return {
      itemHeight: 0,
    }
  },
mounted () {
     // this.itemHeight = this.$refs.item.$el.offsetHeight // 100
     this.$nextTick(() => {
       this.itemHeight = this.$refs.item.$el.offsetHeight // 100
     })
  }

//style
.item {
  width: 100%;
  height: 100px;
}

 

問題就是這么個問題；那怎么辦呢？

data () {
    return {
      itemHeight: 0,
    }
  },
mounted () {
     // this.itemHeight = this.$refs.item.$el.offsetHeight // 100
     // this.$nextTick(() => {
     //   this.itemHeight = this.$refs.item.$el.offsetHeight // 100
     // })
    setTimeout(() => {
      this.itemHeight = this.$refs.item.$el.offsetHeight // 120
    }, 0)
  }

//style
.item {
  width: 100%;
  height: 100px;
}

用setTimeout就可以了，網上有位兄台說setTimeout延遲500毫秒，可以我這樣延遲0秒也可以，親測可以，為啥呢？

加延遲也就是為了讓頁面完全渲染完成之后再去獲取高度，用了setTimeout就已經實現這個效果了，因為setTimeout里邊的代碼就是頁面渲染完成之后執行的；

 

這涉及到線程問題了 ， 簡單說一下吧：

js里有個渲染線程類似於java里邊的主線程，主線程按順序執行代碼，執行完才會有空去看看任務棧里邊有沒有任務需要執行，有的話就拿來到主線程里邊執行，setTimeout就把里邊的代碼放到任務棧中（類似於子線程）了，所以setTimeout里邊這部分代碼會在主線程執行完才會執行；

 

這樣就好像Android里只能在主線程里操作視圖，不能在主線程里做耗時操作，子線程做了耗時操作需要更改視圖時候要通過handler通知主線程；

 

說到這里就再多說兩句：什么樣的代碼會被丟到任務棧里邊呢？耗時的代碼都會被丟到任務棧里邊。比如ajax，setTimeout，點擊事件等。

 

都是自己理解，有不對的地方歡迎下方評論。

 

關於任務棧渲染線程這位仁兄寫的很不錯，可以詳細看看https://www.cnblogs.com/jiasm/p/9482443.html

 

over