浅谈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 innerText和innerHtml应用
Jan 28 Javascript
JavaScript学习笔记(一) js基本语法
Oct 25 Javascript
js中document.getElementByid、document.all和document.layers区分介绍
Dec 08 Javascript
JavaScript Length 属性的总结
Nov 02 Javascript
node+experss实现爬取电影天堂爬虫
Nov 20 Javascript
原生JS实现九宫格抽奖效果
Apr 01 Javascript
vue 多入口文件搭建 vue多页面搭建的实例讲解
Mar 12 Javascript
react以create-react-app为基础创建项目
Mar 14 Javascript
发布一款npm包帮助理解npm的使用
Jan 03 Javascript
react 中父组件与子组件双向绑定问题
May 20 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
Sep 19 Javascript
vue简单封装axios插件和接口的统一管理操作示例
Feb 02 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
用于自动添加Digg This!按钮的JavaScript
2006/12/23 Javascript
JavaScript移除数组内重复元素的方法
2015/03/18 Javascript
原生JS和jQuery版实现文件上传功能
2016/04/18 Javascript
JavaScript 数组中最大最小值
2016/06/05 Javascript
Web安全测试之XSS实例讲解
2016/08/15 Javascript
jQuery可见性过滤选择器用法示例
2016/09/09 Javascript
js实现3D图片展示效果
2017/03/09 Javascript
vue-router 权限控制的示例代码
2017/09/21 Javascript
妙用缓存调用链实现JS方法的重载
2018/04/30 Javascript
详解JavaScript中操作符和表达式
2018/09/12 Javascript
Vue中的vue-resource示例详解
2018/11/02 Javascript
vue图片加载失败时用默认图片替换的方法
2019/08/29 Javascript
VUE实现图片验证码功能
2020/11/18 Javascript
Vue引入Stylus知识点总结
2020/01/16 Javascript
vue实现一个6个输入框的验证码输入组件功能的实例代码
2020/06/29 Javascript
Openlayers实现测量功能
2020/09/25 Javascript
Python lxml模块安装教程
2015/06/02 Python
python简单猜数游戏实例
2015/07/09 Python
python正则分析nginx的访问日志
2017/01/17 Python
python使用Apriori算法进行关联性解析
2017/12/21 Python
浅谈pytorch和Numpy的区别以及相互转换方法
2018/07/26 Python
python实践项目之监控当前联网状态详情
2019/05/23 Python
django的ORM操作 删除和编辑实现详解
2019/07/24 Python
python tkinter实现彩球碰撞屏保
2019/07/30 Python
python并发编程多进程 互斥锁原理解析
2019/08/20 Python
Python+OpenCV图像处理——实现轮廓发现
2020/10/23 Python
韩国邮政旗下生鲜食品网上超市:epost
2016/08/27 全球购物
Camper鞋西班牙官方网上商店:西班牙马略卡岛的鞋类品牌
2019/03/14 全球购物
伦敦新晋轻奢耳饰潮牌:Tada & Toy
2020/05/25 全球购物
简述数据库的设计过程
2015/06/22 面试题
餐饮业的创业计划书范文
2013/12/26 职场文书
《最佳路径》教学反思
2014/04/13 职场文书
产品质量保证书
2014/04/29 职场文书
英文推荐信格式范文
2014/05/09 职场文书
董事长助理工作职责范本
2014/07/01 职场文书
事业单位工作人员2015年度思想工作总结
2015/10/15 职场文书