问题描述：
循环触发el-message时会重叠显示。
原因：
element计算通知的间距时，会取当前元素的高度 item.$el.offsetHeight，但是因为vue 的异步更新队列有缓冲机制（不会每次都更新dom），第一次调用el-message时没有更新dom，导致取到的高度为0，所以第二个通知只是上移了默认的 offset 16px，没有加上第一个通知的高度。
解决方法：
一种是可以修改源码，但是项目中慎用，会影响协同开发。还有一种比较方便的解决方法是直接在循环里，触发el.message的地方加上settimeout，
for（let i=0; i<5; i++) {
setTimeout(() => {
this.$message.error(‘error info’)
}, 50)
}
原理：
1. 同步异步的概念：
同步任务是指在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；
异步任务是指，不进入主线程，而进入「任务队列」task queue的任务，进入任务队列等待主线程读取。异步任务必须指定回调函数，当主线程开始执行异步任务，就是执行对应的回调函数。
2. 执行过程：
所有同步任务都在主线程执行，形成一个「执行栈」execution context stack。先执行同步任务，当执行栈为空时，从任务队列取一个任务来执行异步任务对应的回调函数，再次为空，再取一个任务，如此循环执行，这就是事件循环 EventLoop。
3. 异步任务的整个过程
主线程遇到异步任务，不是直接放入任务队列里的。会交给指定的模块处理，比如setTimeout任务，会交给浏览器的定时器timer模块，定时器到了执行时间才把异步任务放到异步队列里。
所以，上面循环执行setTimeout时，定时器是等到50ms，依次把5个回调函数都放到了任务队列，因为5个都到时间了。（注意这里是定时器把控时间，而不是任务队列！进入任务队列就意味着具有执行的条件了，可以进入执行栈了）
然后等待执行栈为空时，依次把这5个放入执行栈去执行，因为执行的过程很快，所以这5个几乎是同时执行的。如果console时间的话，会同时打印出5个一模一样的时间。
那为啥会解决el-message的问题呢？还不是同时执行的？
因为setTimeout会更新 UI渲染，DOM也就更新了。看👇：
4. 细说任务队列：
js中任务队列分为宏任务队列和微任务队列。
宏任务： script（全局任务）,setTimeout, setInterval, setImmediate, I/O, UI rendering
微任务： process.nextTick, Promise, Object.observer…
浏览器的EventLoop 遵循的是HTML5标准，和nodejs的区别较大。
研究一下浏览器这边的EventLoop过程，分3步：
1). 取一个宏任务执行，执行完毕后，进入下一步。
2). 取一个微任务执行，执行完毕后再取一个微任务，知道微任务队列为空，进入下一步。
3). 更新UI渲染。
EventLoop 会无限循环执行上述三步。
所以也就是说每次执行完一个setTimeout这个宏任务之后，都会更新UI渲染，也就更新了DOM，也就能分开叠在一块的el-message了。
5. setTimeout为啥不保证执行时间
如果主线程有很多同步代码等待执行，或者微任务队列以及当前宏任务队列之前还有人多任务在排队等待执行，那么要等他们执行完成之后setTimeout的回调函数才会被执行，所以不能保证执行时间。
附上参考的两位大佬的博客：
网友评论