今天遇到這麼個問題：

在元件中給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