共计 523 个字符，预计需要花费 2 分钟才能阅读完成。
贴一段代码
函数中程序同步执行，先后触发两个 $message，此时两个 $message 的弹窗重叠
预期的状况是下图这样一上一下呈现
这因为 vue 的异步更新队列有缓冲机制，第一次 $message 触发时，并没有更新 dom，导致第二个 $message 取 item.$el.offsetHeight 取到的高度为 0，所以第二个 $message 只是下移了默认的 offset(即 16px)，并没有加上第一个 $message 的 offsetHeight。
解决这个问题的方法
1、如果是繁多场景，用 $nextTick 解决
在 this.$nextTick(() => {this.$message(...);
});能够保障 dom 更新之后再触发 $message，正确的获取到 $el.offsetHeight
2、将第二个 $message 写在 setTimeout 回调函数中
(其思维与 $nextTick 同理)
3、async + await
注：
如果有多个 (>= 3 个)$message，$nextTick 以及 await 只能解决第 1 个与第 2 个重叠的状况，第 2 个、第 3 个还会重叠，这种状况改用 setTimeout。
完结。
同步更新到本人的语雀
https://www.yuque.com/diracke…
正文完