vue中this.$message显示问题

最新推荐文章于 2024-05-01 18:00:00 发布

原创最新推荐文章于 2024-05-01 18:00:00 发布 · 1.8k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #javascript #前端

文章讲述了Vue中使用message组件时，由于异步特性可能导致较长耗时操作如for循环延迟message的显示。为解决这个问题，提出将耗时代码包在setTimeout函数中，确保message先于这些操作渲染。

vue中message采用异步机制，它不会等到message执行完毕后才执行后面的代码。
后续代码如果是耗时较长的操作，将导致message显示异常。
如果message默认显示时间是4秒，下面代码运行结果是message只有1秒的时间显示（前3秒不显示，for循环完后才显示，尽管for循环在this.$message之后）

msgdemo() {                
                this.$message({
                    message: '恭喜你，这是一条成功消息',
                    type: 'success',
                });
                for(let i=Date.now();Date.now()-i<3000;){} //暂停3秒
            }

因为this.\$message与for几乎是统一时刻执行（这时message实际上已经存在并开始计时），js的单线程机制使得在进行for循环的时候无法同步将message消息渲染到网页上，因此最终结果就是for循环完后，message才被渲染出来。其他的耗时操作，比如文件和数据库的读取都会受此影响，解决办法是给比较耗时的代码块包装到setTimeout函数中，使起比this.$message稍微晚一点点执行
修改后的代码如下：

msgdemo2() {
                
                this.$message({
                    message: '恭喜你，这是一条成功消息',
                    type: 'success',
                });
                setTimeout(()=>{
                    for(let i=Date.now();Date.now()-i<5000;){}
                },100)


            },