Vue获取HTMLCollection列表的children时结果为undefined问题

vue获取HTMLCollection列表的children时结果为undefined

在Vue的钩子函数mounted()中尝试通过document.querySelectorAll()获取HTMLCollection时发现返回的结果为undefined，且length的值也为0：

在Vue的官网查询得知，mounted钩子函数不能保证所有子组件都被挂载完成：

• 在实例挂载完成后被调用，这时候传递给 app.mount 的元素已经被新创建的 vm.$el 替换了。
• 如果根实例被挂载到了一个文档内的元素上，当 mounted 被调用时， vm.$el 也会在文档内。 
• 注意 mounted 不会保证所有的子组件也都被挂载完成。
• 如果你希望等待整个视图都渲染完毕，可以在 mounted 内部使用 vm.$nextTick：

但我在加入了$nextTick实例方法之后，仍然是同样的现象,令人困惑。

于是我便想到了通过MutationObserver来监视DOM的变动,在DOM全部渲染完毕后再获取。

代码如下：

async mounted() {
    // 监视DOM,全部DOM加载完毕后再调用回调函数
    this.observer = new MutationObserver(this.getDir);
    this.observer.observe(document.querySelector(`#content`), {
        childList: true,
        subtree: true,
        attributes: true
    });
}

结果成功：

关于MutationObserver可以移步MDN或者其它博文。

vue读取HTMLCollection列表的length为0问题

在计算better-scroll右侧列表滚动高度的时候，发现列表的length为0

原因：

上网查阅发现问题可能是由于mounted 不会承诺所有的子组件也都一起被挂载。

这个时候dom元素还有没挂载完毕。

如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted：

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

但是不清楚为什么使用了这个方法后获取的length依旧为0，

就在_calculateHeight()方法上加了个定时器，等到完全渲染完成时再获取高度（这种问题可能会出现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)
    },

总结

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