浅谈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 相关文章推荐
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
Oct 29 Javascript
javascript自定义startWith()和endWith()的两种方法
Nov 11 Javascript
如何在JavaScript中实现私有属性的写类方式(一)
Dec 04 Javascript
使用Node.js为其他程序编写扩展的基本方法
Jun 23 Javascript
Css3制作变形与动画效果
Jul 24 Javascript
聊一聊Vue.js过渡效果
Sep 07 Javascript
JavaScript每天必学之数组和对象部分
Sep 17 Javascript
自学实现angularjs依赖注入
Dec 20 Javascript
基于zTree树形菜单的使用实例
Dec 25 Javascript
浅谈Angular HttpClient简单入门
May 04 Javascript
微信小程序实现人脸检测功能
May 25 Javascript
vue+element实现表格新增、编辑、删除功能
May 28 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 分页原理分析,大家可以看看
2009/12/21 PHP
PHP中实现获取IP和地理位置类分享
2015/02/10 PHP
PHP将页面中点击数量高的链接进行高亮显示的方法
2016/05/30 PHP
php 三元运算符实例详细介绍
2016/12/15 PHP
tp5(thinkPHP5)框架实现多数据库查询的方法
2019/01/10 PHP
PHP中$GLOBALS与global的区别详解
2019/03/21 PHP
Laravel基础_关于view共享数据的示例讲解
2019/10/14 PHP
javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码
2009/11/28 Javascript
JS仿淘宝实现的简单滑动门效果代码
2015/10/14 Javascript
原生JavaScript实现滚动条效果
2020/03/24 Javascript
Javascript点击按钮随机改变数字与其颜色
2016/09/01 Javascript
JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用
2016/09/19 Javascript
详解js前端代码异常监控
2017/01/11 Javascript
js实现不提示直接关闭网页窗口
2017/03/30 Javascript
基于webpack 实用配置方法总结
2017/09/28 Javascript
vue、react等单页面项目应该这样子部署到服务器
2018/01/03 Javascript
在vue中通过axios异步使用echarts的方法
2018/01/13 Javascript
jquery弹窗时禁止body滚动条滚动的例子
2019/09/21 jQuery
JavaScript实现简易计算器小功能
2020/10/22 Javascript
微信小程序轮播图swiper代码详解
2020/12/01 Javascript
[34:41]夜魇凡尔赛茶话会 第二期02:你画我猜
2021/03/11 DOTA
Python OpenCV处理图像之滤镜和图像运算
2018/07/10 Python
django创建最简单HTML页面跳转方法
2019/08/16 Python
Python获取时间戳代码实例
2019/09/24 Python
Python如何访问字符串中的值
2020/02/09 Python
python代码如何实现余弦相似性计算
2020/02/09 Python
python中Ansible模块的Playbook的具体使用
2020/05/28 Python
Tensorflow之MNIST CNN实现并保存、加载模型
2020/06/17 Python
浅谈python处理json和redis hash的坑
2020/07/16 Python
html5绘制时钟动画
2014/12/15 HTML / CSS
美国照明、家居装饰和家具购物网站:Bellacor
2017/09/20 全球购物
Hoka One One法国官网:美国专业跑鞋品牌
2018/12/29 全球购物
CheapTickets泰国:廉价航班,查看促销价格并预订机票
2019/12/28 全球购物
卫校中专生的自我评价
2014/01/15 职场文书
担保书格式及范文
2014/04/01 职场文书
2014国庆节演讲稿:祖国在我心中(400字)
2014/09/25 职场文书