浅谈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 相关文章推荐
ExtJS 简介 让你知道extjs是什么
Dec 29 Javascript
JQuery获取各种宽度、高度(format函数)实例
Mar 04 Javascript
json实现前后台的相互传值详解
Jan 05 Javascript
微信小程序 数据访问实例详解
Oct 08 Javascript
使用vue.js实现联动效果的示例代码
Jan 10 Javascript
关于AngularJs数据的本地存储详解
Jan 20 Javascript
Angularjs中使用指令绑定点击事件的方法
Mar 30 Javascript
Node.js对MongoDB数据库实现模糊查询的方法
May 03 Javascript
彻底弄懂 JavaScript 执行机制
Oct 23 Javascript
基于vue实现移动端圆形旋钮插件效果
Nov 28 Javascript
微信小程序单选框自定义赋值
May 26 Javascript
关于对TypeScript泛型参数的默认值理解
Jul 15 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
如何选购合适的收音机
2021/03/01 无线电
php专用数组排序类ArraySortUtil用法实例
2015/04/03 PHP
php实现带读写分离功能的MySQL类完整实例
2016/07/28 PHP
浅谈laravel 5.6 安装 windows上使用composer的安装过程
2019/10/18 PHP
元素的内联事件处理函数的特殊作用域在各浏览器中存在差异
2011/01/12 Javascript
sliderToggle在写jquery的计时器setTimeouter中不生效
2014/05/26 Javascript
Javascript封装DOMContentLoaded事件实例
2014/06/12 Javascript
jQuery实现感应鼠标动画效果自动伸长的输入框实例
2015/02/24 Javascript
浅谈javascript中onbeforeunload与onunload事件
2015/12/10 Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
2016/01/22 Javascript
原生JavaScript实现滚动条效果
2020/03/24 Javascript
JavaScript File API文件上传预览
2016/02/02 Javascript
Angularjs实现多个页面共享数据的方式
2016/03/29 Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
2017/01/04 Javascript
phantomjs导出html到pdf的方法总结
2017/10/19 Javascript
利用vue和element-ui设置表格内容分页的实例
2018/03/02 Javascript
微信小程序实现上传多个文件 超过10个
2020/03/30 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
2020/10/15 Javascript
python中stdout输出不缓存的设置方法
2014/05/29 Python
python编写简易聊天室实现局域网内聊天功能
2018/07/28 Python
Python实现字符串匹配的KMP算法
2019/04/04 Python
Python工程师必考的6个经典面试题
2020/06/28 Python
Python命令行参数argv和argparse该如何使用
2021/02/08 Python
css3绘制天猫logo实现代码
2012/11/06 HTML / CSS
HTML5中微数据概述及在搜索引擎中的使用举例
2013/02/07 HTML / CSS
新西兰珠宝品牌:Michael Hill
2017/09/16 全球购物
澳大利亚个性化儿童礼品网站:Bright Star Kids
2019/06/14 全球购物
加拿大领先的时尚和体育零售商:Sporting Life
2019/12/15 全球购物
家长会学生家长演讲稿
2013/12/29 职场文书
公司募捐倡议书
2014/05/14 职场文书
学习型党组织心得体会
2014/09/12 职场文书
道歉情书大全
2015/05/12 职场文书
如何在Python中创建二叉树
2021/03/30 Python
Nginx已编译的nginx-添加新模块
2021/04/01 Servers
Vue3.0 手写放大镜效果
2021/07/25 Vue.js
python 管理系统实现mysql交互的示例代码
2021/12/06 Python