Vue獲取HTMLCollection列表的children時結(jié)果為undefined問題

更新時間：2024年03月06日 09:58:09 作者：莫諾庫諾

這篇文章主要介紹了Vue獲取HTMLCollection列表的children時結(jié)果為undefined問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue獲取HTMLCollection列表的children時結(jié)果為undefined

在Vue的鉤子函數(shù)mounted()中嘗試通過document.querySelectorAll()獲取HTMLCollection時發(fā)現(xiàn)返回的結(jié)果為undefined，且length的值也為0：

在Vue的官網(wǎng)查詢得知，mounted鉤子函數(shù)不能保證所有子組件都被掛載完成：

在實例掛載完成后被調(diào)用，這時候傳遞給 app.mount 的元素已經(jīng)被新創(chuàng)建的 vm.$el 替換了。
如果根實例被掛載到了一個文檔內(nèi)的元素上，當 mounted 被調(diào)用時， vm.$el 也會在文檔內(nèi)。
注意 mounted 不會保證所有的子組件也都被掛載完成。
如果你希望等待整個視圖都渲染完畢，可以在 mounted 內(nèi)部使用 vm.$nextTick：

但我在加入了$nextTick實例方法之后，仍然是同樣的現(xiàn)象,令人困惑。

于是我便想到了通過MutationObserver來監(jiān)視DOM的變動,在DOM全部渲染完畢后再獲取。

代碼如下：

async mounted() {
    // 監(jiān)視DOM,全部DOM加載完畢后再調(diào)用回調(diào)函數(shù)
    this.observer = new MutationObserver(this.getDir);
    this.observer.observe(document.querySelector(`#content`), {
        childList: true,
        subtree: true,
        attributes: true
    });
}

結(jié)果成功：

關(guān)于MutationObserver可以移步MDN或者其它博文。

vue讀取HTMLCollection列表的length為0問題

在計算better-scroll右側(cè)列表滾動高度的時候，發(fā)現(xiàn)列表的length為0

原因：

上網(wǎng)查閱發(fā)現(xiàn)問題可能是由于mounted 不會承諾所有的子組件也都一起被掛載。

這個時候dom元素還有沒掛載完畢。

如果你希望等到整個視圖都渲染完畢，可以用 vm.$nextTick 替換掉 mounted：

mounted () {
      this.$nextTick(() => {
      this._initScroll(), this._calculateHeight();
    });  },

但是不清楚為什么使用了這個方法后獲取的length依舊為0，

就在_calculateHeight()方法上加了個定時器，等到完全渲染完成時再獲取高度（這種問題可能會出現(xiàn)bug，不知道頁面什么時候渲染完畢）：

_calculateHeight () {
      setTimeout(() => {
        let foodList = this.$refs.right.getElementsByClassName('food-list-hook');
        let height = 0;
        this.listHeight.push(height);
        for (var i = 0; i < foodList.length; i++) {
          let item = foodList[i];
          height += item.clientHeight;
          this.listHeight.push(height);
        }
      }, 200)
    },