問題

在學習餓了麼實踐專案時候發現一個問題，

在mounted階段，獲取Element物件，console.log()可以讀取出列表，而卻無法讀出它的length

　　let foodList = this.$refs.menuWrapper.getElementsByClassName('calculate-content')
      let height = 0
      console.log(foodList)
      console.log(foodList.length)
      for (var i = 0; i < foodList.length; i++) {
        height 
 
+= foodList[i].clientHeight
        this.scrollYList.push(height)
      }

原因：

以下出自官方文件

mounted

• 型別：Function

• 詳細：

  el被新建立的vm.$el替換，並掛載到例項上去之後呼叫該鉤子。如果 root 例項掛載了一個文件內元素，當mounted被呼叫時vm.$el也在文件內。

  注意mounted不會承諾所有的子元件也都一起被掛載。如果你希望等到整個檢視都渲染完畢，可以用vm.$nextTick替換掉mounted：

  mounted: function () {
      this
   
  .$nextTick(function () {
      // Code that will run only after the
      // entire view has been rendered
      })
  }

  該鉤子在伺服器端渲染期間不被呼叫。

看完以上文件介紹，可以知道在mounted階段，mounted不會承諾所有的子元件也都一起被掛載，所以在此階段，dom結構還沒載入完，js就執行了

解決方案：

1.使用官方文件說明（如果你希望等到整個檢視都渲染完畢，可以用vm.$nextTick確保渲染完成後再獲取資料。

重要的是理解執行順序，非同步呼叫的話可以使用Promise保證執行順序

踩到的一個坑：

有文章說可以在updated階段執行，這時可以取到渲染完畢後的List

updated：由於資料更改導致的虛擬 DOM 重新渲染和打補丁，在這之後會呼叫該鉤子

就是說，在使用better-scroll滾動時，會觸發updated，使得scrollYList不斷被推入資料，然後導致我用這個的時候，整個瀏

覽器崩潰了，很是尷尬，哈哈哈，所以我感覺updated執行這個解決方案，不大適合解決這類問題

本文來源於：https://blog.csdn.net/weixin_41602509/article/details/86661758