Vue無法讀取HTMLCollection列表的length問題解決
問題
在學(xué)習(xí)餓了么實踐項目時候發(fā)現(xiàn)一個問題
在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 被新創(chuàng)建的 vm.$el 替換，并掛載到實例上去之后調(diào)用該鉤子。
如果 root 實例掛載了一個文檔內(nèi)元素，當(dāng) mounted 被調(diào)用時 vm.$el 也在文檔內(nèi)。
注意 mounted 不會承諾所有的子組件也都一起被掛載。
如果你希望等到整個視圖都渲染完畢，可以用 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 不會承諾所有的子組件也都一起被掛載，所以在此階段，dom結(jié)構(gòu)還沒加載完，js就執(zhí)行了
解決方案
使用官方文檔說明（如果你希望等到整個視圖都渲染完畢，可以用 vm.$nextTick 確保渲染完成后再獲取數(shù)據(jù)。
重要的是理解執(zhí)行順序，異步調(diào)用的話可以使用Promise保證執(zhí)行順序
踩到的一個坑
有文章說可以在updated階段執(zhí)行，這時可以取到渲染完畢后的List
updated：由于數(shù)據(jù)更改導(dǎo)致的虛擬 DOM 重新渲染和打補丁，在這之后會調(diào)用該鉤子
就是說，在使用better-scroll滾動時，會觸發(fā)updated，使得scrollYList不斷被推入數(shù)據(jù)，然后導(dǎo)致我用這個的時候，整個瀏覽器崩潰了，很是尷尬
哈哈哈，所以我感覺updated執(zhí)行這個解決方案，不大適合解決這類問題
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue表單驗證你真的會了嗎？vue表單驗證（form）validate
這篇文章主要介紹了vue表單驗證你真的會了嗎？vue表單驗證（form）validate,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue2.0s中eventBus實現(xiàn)兄弟組件通信的示例代碼
這篇文章主要介紹了vue2.0s中eventBus實現(xiàn)兄弟組件通信的示例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
使用Vue3的watch實現(xiàn)數(shù)據(jù)的實時更新(附詳細代碼)
vue.js是一個輕量級的前端框架,你可以使用它來實現(xiàn)數(shù)據(jù)實時刷新,下面這篇文章主要介紹了使用Vue3的watch實現(xiàn)數(shù)據(jù)的實時更新的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2025-08-08
這篇文章主要介紹了vue的url請求圖片的問題及請求失敗解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-09-09
下面小編就為大家分享一篇Vue 攔截器對token過期處理方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了vue3中的createApp分析,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
本篇文章主要介紹了詳解vue-cli構(gòu)建項目反向代理配置，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
Vue.js 3.x 中的響應(yīng)式數(shù)據(jù)ref 與 reactive詳解
ref 和 reactive 是 Vue.js 3 中用于創(chuàng)建響應(yīng)式數(shù)據(jù)的兩個關(guān)鍵函數(shù),它們分別適用于不同類型的數(shù)據(jù),幫助我們更好地組織和管理組件的狀態(tài),這篇文章主要介紹了Vue.js 3.x 中的響應(yīng)式數(shù)據(jù)：ref 與 reactive,需要的朋友可以參考下2024-01-01
electron實現(xiàn)打印功能支持靜默打印、無感打印
使用electron開發(fā)應(yīng)用遇到了打印小票的功能,實現(xiàn)途中還是幾經(jīng)波折,下面這篇文章主要給大家介紹了關(guān)于electron實現(xiàn)打印功能支持靜默打印、無感打印的相關(guān)資料,需要的朋友可以參考下2023-12-12
Vue父組件向子組件傳值以及data和props的區(qū)別詳解
這篇文章主要介紹了Vue父組件向子組件傳值以及data和props的區(qū)別詳解，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03