浅谈vue异步数据影响页面渲染


Posted in Javascript onOctober 29, 2019

今天遇到一个问题,要保证页面渲染前请求的数据已经得到了

浅谈vue异步数据影响页面渲染

浅谈vue异步数据影响页面渲染

由于user是在异步请求之后保存在session中,而在页面渲染时session中还没有user,页面直接报错。

因此我希望能在所有请求都得到后再去做页面的渲染。

1.先把id为app的div用v-if="appShow",定义appShow为false进行隐藏,避免渲染

2.写计数器,每1ms进行一次查询,如果session中已经有user,删除过滤器,移除滤布,appShow为true,开始渲染页面,这样可以保证页面的正常渲染。

具体代码如下:

created:function (){
 let that = this
 let timeTerval = setInterval(()=>{ 
 if(sessionStorage.user){
 clearInterval(timeTerval);
 that.appShow = true;//渲染app
 var removeLoad = document.getElementById("loading")
 removeLoad.style.display = "none"
 }else{
 console.log("1222")
 }}, 1);
},

以上这篇浅谈vue异步数据影响页面渲染就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中URL编码函数代码
Jan 11 Javascript
不同Jquery版本引发的问题解决
Oct 14 Javascript
jquery选择器之层级过滤选择器详解
Jan 27 Javascript
jQuery中find()方法用法实例
Jan 07 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
Apr 12 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
Oct 19 Javascript
基于js中的原型(全面讲解)
Sep 19 Javascript
JavaScript 判断对象中是否有某属性的常用方法
Jun 14 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
Aug 19 Javascript
Vue使用Proxy监听所有接口状态的方法实现
Jun 07 Javascript
简述vue-cli中chainWebpack的使用方法
Jul 30 Javascript
Vue项目开发常见问题和解决方案总结
Sep 11 Javascript
详解vue中多个有顺序要求的异步操作处理
Oct 29 #Javascript
vue实现设置载入动画和初始化页面动画效果
Oct 28 #Javascript
vue设置一开始进入的页面教程
Oct 28 #Javascript
Vue调用后端java接口的实例代码
Oct 28 #Javascript
原生js实现商品筛选功能
Oct 28 #Javascript
使用Vue实现调用接口加载页面初始数据
Oct 28 #Javascript
JavaScript制作3D旋转相册
Aug 02 #Javascript
You might like
PHP4实际应用经验篇(1)
2006/10/09 PHP
php模板函数 正则实现代码
2012/10/15 PHP
php快速查找数据库中恶意代码的方法
2015/04/01 PHP
php扩展开发入门demo示例
2019/09/23 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
document.getElementById方法在Firefox与IE中的区别
2010/05/18 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
2016/09/02 Javascript
flag和jq on 的绑定多个对象和方法(必看)
2017/02/27 Javascript
简单的JS控制button颜色随点击更改的实现方法
2017/04/17 Javascript
基于Require.js使用方法(总结)
2017/10/26 Javascript
浅析node Async异步处理模块用例分析及常用方法介绍
2017/11/17 Javascript
深入浅出理解JavaScript闭包的功能与用法
2018/08/01 Javascript
Javascript中parseInt的正确使用方式
2018/10/17 Javascript
JS大坑之19位数的Number型精度丢失问题详解
2019/04/22 Javascript
js设计模式之单例模式原理与用法详解
2019/08/15 Javascript
[07:52]2014DOTA2 TI逗比武士游V社解说背后的故事
2014/07/10 DOTA
[48:24]完美世界DOTA2联赛循环赛LBZS vs Forest 第一场 10月30日
2020/10/31 DOTA
python中print()函数的“,”与java中System.out.print()函数中的“+”功能详解
2017/11/24 Python
Python Flask 搭建微信小程序后台详解
2019/05/06 Python
Python 迭代,for...in遍历,迭代原理与应用示例
2019/10/12 Python
VSCODE配置Markdown及Markdown基础语法详解
2021/01/19 Python
Python爬虫制作翻译程序的示例代码
2021/02/22 Python
美国珠宝网上商店:Jeulia
2016/09/01 全球购物
金融专业应届生求职信
2013/11/02 职场文书
个人近期表现材料
2014/02/11 职场文书
《金色的脚印》教后反思
2014/04/23 职场文书
旅游节目策划方案
2014/05/26 职场文书
幼儿园师德师风学习材料
2014/05/29 职场文书
伊琍体标语
2014/06/25 职场文书
药品营销专业毕业生自荐信
2014/07/02 职场文书
安全生产月宣传标语
2014/10/06 职场文书
夫妻房产协议书的格式
2014/10/11 职场文书
考试作弊检讨书
2015/01/27 职场文书
幼师辞职信怎么写
2015/02/27 职场文书
养成教育工作总结
2015/08/13 职场文书
7个关于Python的经典基础案例
2021/11/07 Python