浅谈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 相关文章推荐
[原创]保存的js无法执行的解决办法
Feb 25 Javascript
表单项的name命名为submit、reset引起的问题
Dec 22 Javascript
jquery中常用的SET和GET$(”#msg”).html循环介绍
Oct 09 Javascript
Jquery实现侧边栏跟随滚动条固定(兼容IE6)
Apr 02 Javascript
jQuery实现“扫码阅读”功能
Jan 21 Javascript
jQuery中extend函数的实现原理详解
Feb 03 Javascript
jQ处理xml文件和xml字符串的方法(详解)
Nov 22 Javascript
JS实现HTML标签转义及反转义
Apr 14 Javascript
javascript循环链表之约瑟夫环的实现方法
Jan 16 Javascript
JS函数节流和防抖之间的区分和实现详解
Jan 11 Javascript
简单了解JavaScript异步
May 23 Javascript
jQuery开发仿QQ版音乐播放器
Jul 10 jQuery
详解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
星际流派综述
2020/03/04 星际争霸
PHP在XP下IIS和Apache2服务器上的安装
2006/09/05 PHP
php session_start()出错原因分析及解决方法
2013/10/28 PHP
php通过array_push()函数添加多个变量到数组末尾的方法
2015/03/18 PHP
PHP获取毫秒级时间戳的方法
2015/04/15 PHP
CodeIgniter表单验证方法实例详解
2016/03/03 PHP
PHP实现冒泡排序的简单实例
2016/05/26 PHP
基于jquery实现的文字淡入淡出效果
2013/11/14 Javascript
原生的html元素选择器类似jquery选择器
2014/10/15 Javascript
javascript最基本的函数汇总
2015/06/25 Javascript
JavaScript实现上下浮动的窗口效果代码
2015/10/12 Javascript
全面解析JavaScript中的valueOf与toString方法(推荐)
2016/06/14 Javascript
jQuery如何解决IE输入框不能输入的问题
2016/10/08 Javascript
JavaScript获取服务器时间的方法详解
2016/12/11 Javascript
浅析JavaScript中的平稳退化(graceful degradation)
2017/07/24 Javascript
Node.js自定义实现文件路由功能
2017/09/22 Javascript
jQuery除指定区域外点击任何地方隐藏DIV功能
2017/11/13 jQuery
Webpack优化配置缩小文件搜索范围
2017/12/25 Javascript
浅谈webpack性能榨汁机(打包速度优化)
2019/01/09 Javascript
浅析Vue下的components模板使用及应用
2019/11/27 Javascript
Vue自动构建发布脚本的方法示例
2020/07/24 Javascript
React 条件渲染最佳实践小结(7种)
2020/09/27 Javascript
[56:47]Ti4 循环赛第三日 iG vs Liquid
2014/07/12 DOTA
[18:16]sakonoko 2017年卡尔集锦
2018/02/06 DOTA
Python向日志输出中添加上下文信息
2017/05/24 Python
python装饰器实例大详解
2017/10/25 Python
解决python中无法自动补全代码的问题
2018/12/04 Python
python将四元数变换为旋转矩阵的实例
2019/12/04 Python
keras load model时出现Missing Layer错误的解决方式
2020/06/11 Python
Python 字典一个键对应多个值的方法
2020/09/29 Python
HTML5的Geolocation地理位置定位API使用教程
2016/05/12 HTML / CSS
加拿大当代时尚服饰、配饰和鞋类专业零售商和制造商:LE CHÂTEAU
2017/10/06 全球购物
工程力学专业毕业生求职信
2013/10/06 职场文书
大三预备党员入党思想汇报
2014/01/08 职场文书
激情洋溢的毕业生就业求职信
2014/03/15 职场文书
2014年安全保卫工作总结
2014/11/13 职场文书