在数据渲染完成之前,加了一个loading,在页面渲染完成之后关闭, 但是发现,页面还没有完成渲染,loading就关闭了

项目场景：

在日常开发中经常遇到组件模板渲染逻辑比较复杂渲染时间比较长的开发场景 这时候往往都会加上loading来增加用户体验感

---

问题描述

我们往往在数据渲染完成之前,加了一个loading,在页面渲染完成之后关闭, 但是发现,页面还没有完成渲染,loading就关闭了这种方式显示不能满足我们渲染时间长一点的html

---

解决方案：

方法1：

 this.$nextTick(()=>{

         this.testModuleloading = false;

 })

方法2：

 setTimeout(()=>{

         this.cardModuleloading = false;

 },0)
都能实现 方法1原理是 等dom更新(组件重新渲染)之后在调用；方法2原理是利用js代码异步执行宏任务、微任务 执行时会启动异步线程，后续同步代码会正常执行。执行时会将task任务( this.testModuleloading = false;)添加到宏任务队列的队尾，等到当前脚本的所有同步任务执行完，然后再等到本次Event Loop的“任务队列”的所有任务执行完，才会开始执行。执行时会检查是否到了指定倒计时时间，如果到了，就执行；如果不到，就等到再下一轮Event Loop时重新判断。