浅谈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 相关文章推荐
AJAX 网页保留浏览器前进后退等功能
Feb 12 Javascript
jquery获取html元素的绝对位置和相对位置的方法
Jun 20 Javascript
动态创建按钮的JavaScript代码
Jan 29 Javascript
JavaScript必知必会(六) delete in instanceof
Jun 08 Javascript
JavaScript中数据类型转换总结
Dec 25 Javascript
解决webpack无法通过IP地址访问localhost的问题
Feb 22 Javascript
JavaScript Canvas实现验证码
Aug 02 Javascript
在vue中使用SockJS实现webSocket通信的过程
Aug 29 Javascript
200行HTML+JavaScript实现年会抽奖程序
Jan 22 Javascript
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
Apr 15 Javascript
Vue 实现简易多行滚动"弹幕"效果
Jan 02 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
Jul 20 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
ninety plus是什么?ninety plus咖啡好吗?
2021/03/04 新手入门
详解:――如何将图片储存在数据库里
2006/12/05 PHP
php 无极分类(递归)实现代码
2010/01/05 PHP
php下载excel无法打开的解决方法
2013/12/24 PHP
PHP遍历XML文档所有节点的方法
2015/03/12 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
php实现在线考试系统【附源码】
2018/09/18 PHP
使用laravel指定日志文件记录任意日志
2019/10/17 PHP
IE8 引入跨站数据获取功能说明
2008/07/22 Javascript
JS 文件传参及处理技巧分析
2010/05/13 Javascript
jquery 插件学习(五)
2012/08/06 Javascript
使用jQuery validate 验证注册表单实例演示
2013/03/25 Javascript
JQuery中SetTimeOut传参问题探讨
2013/05/10 Javascript
JS阻止用户多次提交示例代码
2014/03/26 Javascript
vue组件初学_弹射小球(实例讲解)
2017/09/06 Javascript
JS闭包原理与应用经典示例
2018/12/20 Javascript
Vue中component标签解决项目组件化操作
2020/09/04 Javascript
Vue 实现可视化拖拽页面编辑器
2021/02/01 Vue.js
[01:02:02]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第二局
2016/02/25 DOTA
[46:48]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第三局
2016/02/25 DOTA
[48:35]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 TNC vs Optic
2018/04/03 DOTA
python与php实现分割文件代码
2017/03/06 Python
Python基础练习之用户登录实现代码分享
2017/11/08 Python
分享一个简单的python读写文件脚本
2017/11/25 Python
Python实现的桶排序算法示例
2017/11/29 Python
django中send_mail功能实现详解
2018/02/06 Python
Python实现的端口扫描功能示例
2018/04/08 Python
python十进制和二进制的转换方法(含浮点数)
2018/07/07 Python
pandas 层次化索引的实现方法
2019/07/06 Python
Mistine官方海外旗舰店:泰国国民彩妆品牌
2016/12/28 全球购物
中西医结合临床医学专业大学生自荐信
2013/09/28 职场文书
财务总经理岗位职责
2014/02/16 职场文书
演讲比赛策划方案
2014/06/11 职场文书
会计专业应届生自荐信
2014/06/28 职场文书
美容院合作经营协议书
2014/10/10 职场文书
考试没考好检讨书(精选篇)
2014/11/16 职场文书