javascript - 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文档

这篇关于javascript - vue中mounted函数中添加setTimeout有什么作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！