在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或者其它博文。

当然肯定有其它更好的方法,此方法仅供参考。