refs的坑

 <div class="slider-group" ref="sliderGroup">
      <slot>
      </slot>
   
    </div>

该数据来源先是发送ajax请求获取数据再渲染dom
在mounted中调用

// console.log(this.$refs.sliderGroup.children)
        this.children = this.$refs.sliderGroup.children

今天在调试的时候，发现console.log(this.$refs.sliderGroup.children)能取到该dom集合
但在

        this.children = this.$refs.sliderGroup.children

赋值的时候， this.children始终取不到
一开始，以为 是 类数组对象的问题 然后各种类数组转数组的方法，尝试失败，一度怀疑人生
console.log的坑 虽然能打印出来，但是dom并没有渲染完毕
解决

  mounted() {
      // setTimeout(() => {
      //   this._setSliderWidth()
      //   this._initDots()
      //   this._initSlider()
      //   if (this.autoPlay) {
      //     this._play()
      //   }
      // }, 20)
      let length = this.$refs.sliderGroup.children.length
      const fecthChil = () => {
        window.setTimeout(() => {
          length = this.$refs.sliderGroup.children.length
          // console.log('.....', length)
          if (length <= 0) fecthChil()
          // const chi  = Array.from(this.$refs.sliderGroup.children)
          // console.log('233c', chi)
          this._setSliderWidth()
          this._initDots()
          this._initSlider()
          if (this.autoPlay) {
            this._play()
          }
        }, 300)
      }
      fecthChil()

写这篇文章，谨以此记住这个坑
善用debugger
参考：
https://forum.vuejs.org/t/solved-this-refs-key-returns-undefined-when-it-really-is/1226/2