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

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

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

教程中的解释

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

不是很懂,有人解释下吗? 谢谢

回答:

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

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

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

nextTick文档

回答:

this.$nextTick(()={
    
})

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

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注