快捷導(dǎo)航

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

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

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

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

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

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

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

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

于是我便想到了通過MutationObserver來監(jiān)視DOM的變動(dòng),在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問題

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

原因：

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

這個(gè)時(shí)候dom元素還有沒掛載完畢。

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

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

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

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

_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)
    },