Vue无法读取HTMLCollection列表的length问题解决

问题

在学习饿了么实践项目时候发现一个问题

在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就执行了  

解决方案

使用官方文档说明（如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 确保渲染完成后再获取数据。

重要的是理解执行顺序，异步调用的话可以使用Promise保证执行顺序

踩到的一个坑

有文章说可以在updated阶段执行，这时可以取到渲染完毕后的List

updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子

就是说，在使用better-scroll滚动时，会触发updated，使得scrollYList不断被推入数据，然后导致我用这个的时候，整个浏览器崩溃了，很是尴尬

哈哈哈，所以我感觉updated执行这个解决方案，不大适合解决这类问题

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。