手机可播放的网站,wordpress注册侧边栏,网站建设设计师,网站商城建设多少钱目录 现象分析原因 浏览器中Js是单线程的#xff0c;当然不可能出现线程安全问题。只是遇到的问题的现象与多线程的情况十分相似#xff0c;导致对不了解Vue实现的我怀疑起了人生… 现象
项目中用到了element-plus中的加载组件#xff0c;简单封装了一下#xff0c;用来保… 目录 现象分析原因 浏览器中Js是单线程的当然不可能出现线程安全问题。只是遇到的问题的现象与多线程的情况十分相似导致对不了解Vue实现的我怀疑起了人生… 现象
项目中用到了element-plus中的加载组件简单封装了一下用来保证只会出现一个加载框大概是这样
import { ElLoading } from element-pluslet instance
let count 0
export function startLoading() {if (count 0) {// 临界区instance ElLoading.service()}count
}
export function stopLoading() {count--if (count 0) {instance.close()}
}使用的时候意外的出现了多个实例但是只保存了最后创建的实例导致界面上有个loading无法关闭。 复现Demo
分析
打断点调试发现到instance ElLoading.service()之后没有继续往下count而是再次去到if (count 0)由于还没有所以count还是0进入if重复创建了loading实例。 这个现象乍一看和有两条线程同时进入了startLoading的情况一模一样。不过我发现后面count的值是没错的所以把count提到前面改成这样问题没有再复现。
export function startLoading() {countif (count 1) {instance ElLoading.service()}
}如果存在线程安全那么count如果不是原子操作的话同样的问题还是会出现的。查了一圈资料没有找到相关信息。 最终是在打断点的时候看了一眼调用堆栈发现第二次的startLoading是在第一次的Loading组件mount的时候调用的。也就是说两次调用是串行的嵌套关系而不是并行直接松了一口气
原因
问题的关键在于Vue的watch实现第二次的startLoading是在watch中调用的。watch的数据变化事件会被Vue放到队列中在mount组件时会先处理这个队列所以在mount第一个Loading组件时执行了第二个startLoading 关键方法是flushPreFlushCbs具体之后再学习学习
