mounted中使用getElementsByClassName无法获取

问题

在mounted中使用document.getElementsByClassName能打印元素集但是不能访问

代码

mounted() {
    this.handleDOM()
}
methods: {
    handleDOM() {
      let swiperEl = document.querySelector('.swiper') //获取swiper元素
      let itemEls = swiperEl.getElementsByClassName('slide')   //获取所有item个数

      console.log(itemEls); //打印元素集合
      console.log(itemEls.length);//打印元素个数
    }
  }

打印的元素集

捕获.PNG

先来说说mounted

以下出自官方文档

el 被新创建的 vm.el 也在文档内。

注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以>用 vm.$nextTick 替换掉 mounted：

总结

mounted是当模板被渲染完，在挂载到实例上去，然后在执行钩子，但mounted不承诺
当所有的元素都加载完成在执行
所以在元素还没有全部加载完，就执行了js代码，所有才导致获取不到的原因

解决办法

这也是个笨办法，在以后的开发中可能会产生一定的bug
使用异步操作

    setInterval(() => {
      if (this.isLoad) {
        this.handleDOM()
        this.isLoad = false
      }

    },100)

所以在实际开发中我们要注意生命周期函数运行的实质