vue中mounted函数中添加setTimeout有什么作用

Question

在看关于vue开发的教程时，写一个页面，在mounted钩子函数中会加一个setTimeout()，如下：

    mounted() {
      setTimeout(() => {
        this._setSliderWidth()
        this._initDots()
        this._initSlider()
      }, 20)
    }

教程中的解释

为了保证dom成功渲染，通常会在mounted函数中加个延时函数，由于浏览器刷新的时间一般为17ms一次，因此把setTimeout的值设置为17ms之后，即20ms

不是很懂，有人解释下吗？ 谢谢

Answer 1

在vue将元素挂载到dom上之后, 浏览器要去将元素渲染出来, 那个20ms就是给浏览器20ms的渲染时间, 这种做法比较扯蛋, 你这个教程我觉得还是不要看了... 还不如自己去慢慢看官方文档。

官方文档说的很明白使用this.$nextTick就是为了解决dom渲染的问题, 竟然还去用setTimeout:

mounted(){
    this.$nextTick(() => {
        //这里的代码会在dom渲染完毕运行
        this._setSliderWidth()
        this._initDots()
        this._initSlider()
     })
}

nextTick文档

Answer 2

用

this.$nextTick(()={
    
})

vue 官方的解决dom成功渲染的方法