浅谈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 json2 使用方法
Mar 16 Javascript
JQuery拖拽元素改变大小尺寸实现代码
Dec 10 Javascript
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
Sep 29 Javascript
js截取固定长度的中英文字符的简单实例
Nov 22 Javascript
在myeclipse中如何加入jquery代码提示功能
Jun 03 Javascript
JavaScript实现的链表数据结构实例
Apr 02 Javascript
基于JavaScript实现简单的随机抽奖小程序
Jan 05 Javascript
省市选择的简单实现(基于zepto.js)
Jun 21 Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
Feb 17 Javascript
JS实现无缝循环marquee滚动效果
May 22 Javascript
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
JS+HTML5 canvas绘制验证码示例
Dec 05 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+mysql实现简单的增删改查功能
2015/07/13 PHP
PHP实现仿Google分页效果的分页函数
2015/07/29 PHP
php开发时容易忘记的一些技术细节
2016/02/03 PHP
共享自己写一个框架DreamScript
2007/01/20 Javascript
一段利用WSH修改和查看IP配置的代码
2008/05/11 Javascript
javascript json 新手入门文档
2009/12/03 Javascript
一个JavaScript处理textarea中的字符成每一行实例
2014/09/22 Javascript
jQuery处理XML文件的几种方法
2016/06/14 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
2016/10/12 Javascript
JQuery实现列表中复选框全选反选功能封装(推荐)
2016/11/24 Javascript
微信小程序 input输入框详解及简单实例
2017/01/10 Javascript
js仿微博动态栏功能
2017/02/22 Javascript
详解webpack 多页面/入口支持&公共组件单独打包
2017/06/29 Javascript
AngularJS 仿微信图片手势缩放的实例
2017/09/28 Javascript
详解layui中的树形关于取值传值问题
2018/01/16 Javascript
深入理解vue中slot与slot-scope的具体使用
2018/01/26 Javascript
js+canvas实现滑动拼图验证码功能
2018/03/26 Javascript
微信小程序scroll-x失效的完美解决方法
2018/07/18 Javascript
js中let能否完全替代IIFE
2019/06/15 Javascript
layui默认选中table的CheckBox复选框方法
2019/09/19 Javascript
前端深入理解Typescript泛型概念
2020/03/09 Javascript
vue实现从外部修改组件内部的变量的值
2020/07/30 Javascript
javascript实现倒计时提示框
2021/03/02 Javascript
[01:03:31]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第二局
2016/02/26 DOTA
Python中列表和元组的使用方法和区别详解
2020/12/30 Python
python爬取足球直播吧五大联赛积分榜
2018/06/13 Python
python 实现单通道转3通道
2019/12/03 Python
django自带的权限管理Permission用法说明
2020/05/13 Python
Django 解决由save方法引发的错误
2020/05/21 Python
美国非常受欢迎的Spa品牌:Bliss必列斯
2018/04/10 全球购物
安全的后院和健身蹦床:JumpSport
2019/07/15 全球购物
自荐信格式范文
2013/10/07 职场文书
优质服务口号
2014/06/11 职场文书
义诊活动总结
2015/02/04 职场文书
党小组推荐意见
2015/06/02 职场文书
2016教师暑期培训学习心得体会
2016/01/09 职场文书