浅谈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 仿QQ滑动菜单效果代码
Sep 03 Javascript
深入解析JavaScript中的变量作用域
Dec 06 Javascript
javaScript中的this示例学习详解及工作原理
Jan 13 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
JS实现网页每隔3秒弹出一次对话框的方法
Nov 09 Javascript
使用JQuery FancyBox插件实现图片展示特效
Nov 16 Javascript
jquery的checkbox,radio,select等方法小结
Aug 30 Javascript
Rollup处理并打包JS文件项目实例代码
May 31 Javascript
Nuxt.js SSR与权限验证的实现
Nov 21 Javascript
微信小程序云开发之使用云存储
May 17 Javascript
VUE项目中加载已保存的笔记实例方法
Sep 14 Javascript
Windows上node.js的多版本管理工具用法实例分析
Nov 06 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
使用无限生命期Session的方法
2006/10/09 PHP
域名查询代码公布
2006/10/09 PHP
php Smarty模板生成html文档的方法
2010/04/12 PHP
PHP中的多行字符串传递给JavaScript的两种方法
2014/06/19 PHP
CI框架中redis缓存相关操作文件示例代码
2016/05/17 PHP
php加密之discuz内容经典加密方式实例详解
2017/02/04 PHP
[原创]PHP正则删除html代码中a标签并保留标签内容的方法
2017/05/23 PHP
复制js对象方法(详解)
2013/07/08 Javascript
javascript数字时钟示例分享
2014/04/23 Javascript
基于javascript实现的购物商城商品倒计时实例
2016/12/11 Javascript
JS打印彩色菱形的实例代码
2018/08/15 Javascript
NodeJs入门教程之定时器和队列
2019/03/08 NodeJs
js console.log打印对象时属性缺失的解决方法
2019/05/23 Javascript
ES6 Generator基本使用方法示例
2020/06/06 Javascript
[01:25]DOTA2超级联赛专访iG 将调整状态找回自己
2013/06/05 DOTA
[02:20]DOTA2亚洲邀请赛 EHOME战队出场宣传片
2015/02/07 DOTA
跟老齐学Python之正规地说一句话
2014/09/28 Python
对Python3 pyc 文件的使用详解
2019/02/16 Python
Python实现图片转字符画的代码实例
2019/02/22 Python
python中hasattr()、getattr()、setattr()函数的使用
2019/08/16 Python
python生成随机红包的实例写法
2019/09/02 Python
Numpy中对向量、矩阵的使用详解
2019/10/29 Python
python django中8000端口被占用的解决
2019/12/17 Python
Python如何输出整数
2020/06/07 Python
美国高端婴童品牌:Hanna Andersson
2016/10/30 全球购物
新领导上任欢迎词
2014/01/13 职场文书
加油口号大全
2014/06/13 职场文书
小学数学教研活动总结
2014/07/01 职场文书
放飞理想演讲稿
2014/09/09 职场文书
红领巾心向党演讲稿
2014/09/10 职场文书
2014中学教师节广播稿
2014/09/10 职场文书
企业党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
党员三严三实心得体会
2014/10/13 职场文书
工作失误检讨书范文
2015/01/26 职场文书
大学生社会实践活动总结报告
2015/05/06 职场文书
Python采集爬取京东商品信息和评论并存入MySQL
2022/04/12 Python