讀取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，不知道頁(yè)面什么時(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)
? ? },

無法讀取HTMLCollection列表的length解決

問題

在學(xué)習(xí)餓了么實(shí)踐項(xiàng)目時(shí)候發(fā)現(xiàn)一個(gè)問題，

在mounted階段，獲取Element對(duì)象，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
• 詳細(xì)：
• el 被新創(chuàng)建的 vm.$el 替換，并掛載到實(shí)例上去之后調(diào)用該鉤子。如果 root 實(shí)例掛載了一個(gè)文檔內(nèi)元素，當(dāng) mounted 被調(diào)用時(shí) vm.$el 也在文檔內(nèi)。

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

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

該鉤子在服務(wù)器端渲染期間不被調(diào)用。

看完以上文檔介紹，可以知道在mounted階段，mounted 不會(huì)承諾所有的子組件也都一起被掛載，所以在此階段，dom結(jié)構(gòu)還沒加載完，js就執(zhí)行了  

解決方案

1.使用官方文檔說明（如果你希望等到整個(gè)視圖都渲染完畢，可以用 vm.$nextTick 確保渲染完成后再獲取數(shù)據(jù)。

重要的是理解執(zhí)行順序，異步調(diào)用的話可以使用Promise保證執(zhí)行順序

踩到的一個(gè)坑：

有文章說可以在updated階段執(zhí)行，這時(shí)可以取到渲染完畢后的List

updated：由于數(shù)據(jù)更改導(dǎo)致的虛擬 DOM 重新渲染和打補(bǔ)丁，在這之后會(huì)調(diào)用該鉤子

就是說，在使用better-scroll滾動(dòng)時(shí)，會(huì)觸發(fā)updated，使得scrollYList不斷被推入數(shù)據(jù)，然后導(dǎo)致我用這個(gè)的時(shí)候，整個(gè)瀏

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

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。