浅谈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 相关文章推荐
9个JavaScript评级/投票插件
Jan 18 Javascript
一个封装js代码-----展开收起效果示例
Jul 03 Javascript
js简单抽奖代码
Jan 16 Javascript
Angularjs material 实现搜索框功能
Mar 08 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
Jul 09 Javascript
JavaScript实现的CRC32函数示例
Nov 23 Javascript
jquery-mobile表单的创建方法详解
Nov 23 Javascript
微信小程序 picker 组件详解及简单实例
Jan 10 Javascript
用原生js做单页应用
Jan 17 Javascript
详解vue2.0+vue-video-player实现hls播放全过程
Mar 02 Javascript
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
Sep 06 Javascript
vue如何使用rem适配
Feb 06 Vue.js
详解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
mysql5详细安装教程
2007/01/15 PHP
PHP 简单数组排序实现代码
2009/08/05 PHP
PHP文件上传主要代码讲解
2013/09/30 PHP
PHP反射使用实例和PHP反射API的中文说明
2014/07/02 PHP
PHP实现上传图片到 zimg 服务器
2016/10/19 PHP
PHP正则表达式匹配替换与分割功能实例浅析
2017/02/04 PHP
Laravel框架实现抢红包功能示例
2019/10/31 PHP
javascript 函数式编程
2007/08/16 Javascript
用户注册常用javascript代码
2009/08/29 Javascript
javascript中利用数组实现的循环队列代码
2010/01/24 Javascript
JQuery Tab选项卡效果代码改进版
2010/04/01 Javascript
node.js WEB开发中图片验证码的实现方法
2014/06/03 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
2015/01/23 Javascript
在JavaScript中操作时间之setYear()方法的使用
2015/06/12 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
2016/02/02 Javascript
完美JQuery图片切换效果的简单实现
2016/07/21 Javascript
javascript实现用户点击数量统计
2016/12/25 Javascript
Bootstrap常用组件学习(整理)
2017/03/24 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
2017/03/29 Javascript
jQuery创建及操作xml格式数据示例
2018/05/26 jQuery
JS中appendChild追加子节点无效的解决方法
2018/10/14 Javascript
鸿蒙系统中的 JS 开发框架
2020/09/18 Javascript
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
2020/12/10 Javascript
详解python脚本自动生成需要文件实例代码
2017/02/04 Python
Tensorflow模型实现预测或识别单张图片
2019/07/19 Python
Python获取统计自己的qq群成员信息的方法
2019/11/15 Python
Python高级property属性用法实例分析
2019/11/19 Python
关于matplotlib-legend 位置属性 loc 使用说明
2020/05/16 Python
骆驼官方商城:CAMEL
2016/11/22 全球购物
考试违纪检讨书
2014/02/02 职场文书
疾病防治方案
2014/05/31 职场文书
师德师风主题教育活动总结
2015/05/07 职场文书
Win11黑色桌面背景怎么办?Win11黑色壁纸解决方法汇总
2022/04/05 数码科技
方法汇总:Python 安装第三方库常用
2022/04/26 Python
Windows server 2012 R2 安装IIS服务器
2022/04/29 Servers
html中两种获取标签内的值的方法
2022/06/10 HTML / CSS