本文共 666 字，大约阅读时间需要 2 分钟。

先上demo

demo: 

github: 

解析(必要的叨叨)

一般的loading逻辑

通过一个 Boolean 变量控制loading的展示与关闭状态, 考虑到: 当进程是单个的, 这种方法确实是最简单的也最有效的

但是实际应用中, 很多情况都不是单进程的, 例如: 多个http请求, 多个本地任务等场景, 所以这种方案, 应该被摒弃 当多个http请求在同时执行的时候 一旦某个请求完成 那么这个控制显示的变量就变成了false 这时候其实还有一个或者多个请求没有完成的,所以会导致loading加载结束,仍有部分数据是空白的,用户体验极差

通过队列(list)的形式来记录loading的实例

个人觉得, 更加合理的loading控制方案应该是以队列的形式来展现的,

所以结合vuex(或者你可以直接loading组件定义一个队列来存储当前的loading列表)可以直观, 而且准确无误的控制loading的打开和关闭 如果你需要更为精准的方案: 给每一个loading绑定一个uuid  上没有用uuid这种方法,因为只是演示其实是我懒 当然,要加上去并不难,具体需不需要就看你们自己项目需求了. toast组件是同样的原理, 做一些细微的业务需求调整即可实现, 我就不多说了.

我想大部分人已经是第二种甚至是更完美的解决方案了, 此偏文章仅当作给新手之路和个人学习笔记之一

还有 demo 中vuex的写法并非完全按照官方最佳实践来的. 因为只是个demo, 写得有点急也为了让新手看得没这么绕, 真正写组件别学我!!!

转载地址：http://apeni.baihongyu.com/