浅谈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 相关文章推荐
初窥JQuery(一)jquery选择符 必备知识点
Nov 25 Javascript
深入剖析JavaScript中的枚举功能
Mar 06 Javascript
javascript表单验证和Window详解
Dec 11 Javascript
jQuery中[attribute*=value]选择器用法实例
Dec 31 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
Feb 05 Javascript
基于OL2实现百度地图ABCD marker的效果
Oct 01 Javascript
详解Bootstrap glyphicons字体图标
Jan 04 Javascript
JS代码实现百度地图 画圆 删除标注
Oct 12 Javascript
Node.js学习入门
Jan 03 Javascript
vue中如何实现pdf文件预览的方法
Jul 12 Javascript
代码整洁之道(重构)
Oct 25 Javascript
JavaScript之数组扁平化详解
Jun 03 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
PHP+FLASH实现上传文件进度条相关文件 下载
2007/07/21 PHP
php 连接mysql连接被重置的解决方法
2011/02/15 PHP
PHP创建单例后台进程的方法示例
2017/05/23 PHP
TP5框架实现一次选择多张图片并预览的方法示例
2020/04/04 PHP
从零开始学习jQuery (二) 万能的选择器
2010/10/01 Javascript
基于JQuery的访问WebService的代码(可访问Java[Xfire])
2010/11/19 Javascript
js弹出框轻量级插件jquery.boxy使用介绍
2013/01/15 Javascript
基于javascript实现最简单的选项卡切换效果
2016/05/16 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
2016/06/20 Javascript
Js删除数组中某一项或几项的几种方法(推荐)
2016/07/27 Javascript
详解angular2实现ng2-router 路由和嵌套路由
2017/03/24 Javascript
Web前端框架Angular4.0.0 正式版发布
2017/03/28 Javascript
vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
2018/05/28 Javascript
详解npm 配置项registry修改为淘宝镜像
2018/09/07 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
2019/04/12 Javascript
简单学习5种处理Vue.js异常的方法
2019/06/17 Javascript
Python获取Linux系统下的本机IP地址代码分享
2014/11/07 Python
使用Python的Flask框架实现视频的流媒体传输
2015/03/31 Python
对python 数据处理中的LabelEncoder 和 OneHotEncoder详解
2018/07/11 Python
python学习--使用QQ邮箱发送邮件代码实例
2019/04/16 Python
PyQt5+Caffe+Opencv搭建人脸识别登录界面
2019/08/28 Python
flask 实现token机制的示例代码
2019/11/07 Python
Python如何使用bokeh包和geojson数据绘制地图
2020/03/21 Python
使用phonegap操作数据库的实现方法
2017/03/31 HTML / CSS
加拿大便宜的隐形眼镜商店:Clearly
2016/09/15 全球购物
WoolOvers爱尔兰:羊绒、羊毛和棉针织品
2017/01/04 全球购物
美国照明、家居装饰和家具购物网站:Bellacor
2017/09/20 全球购物
法国最大电子商务平台:Cdiscount
2018/03/13 全球购物
新西兰网上购物,折扣店:BestDeals.co.nz
2019/03/20 全球购物
如果有两个类A,B,怎么样才能使A在发生一个事件的时候通知B
2016/03/12 面试题
学习决心书范文
2014/03/11 职场文书
高一学生期末评语
2014/04/25 职场文书
中华魂演讲稿
2014/05/13 职场文书
检察院对照“四风”认真查找问题落实整改措施
2014/09/26 职场文书
志愿者个人总结
2015/03/03 职场文书
公历12个月名称的由来
2022/04/12 杂记