浅谈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中的关于类型转换的性能优化
Dec 14 Javascript
jquery中event对象属性与方法小结
Dec 18 Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
Apr 12 Javascript
JavaScript检测字符串中是否含有html标签实现方法
Jul 01 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
Sep 30 Javascript
jquery实现数字输入框
Feb 22 Javascript
vue axios 二次封装的示例代码
Dec 08 Javascript
JavaScript面向对象的程序设计(犯迷糊的小羊)
May 27 Javascript
vue中过滤器filter的讲解
Jan 21 Javascript
JavaScript中的类型检查
Feb 03 Javascript
vue 全局封装loading加载教程(全局监听)
Nov 05 Javascript
ant design的table组件实现全选功能以及自定义分页
Nov 17 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
正义联盟的终局之战《天启星战争》将成为DC动画宇宙的最后一部
2020/04/09 欧美动漫
php遍历文件夹和文件列表示例分享
2014/03/11 PHP
async和DOM Script文件加载比较
2014/07/20 PHP
php根据日期显示所在星座的方法
2015/07/13 PHP
php实现替换手机号中间数字为*号及隐藏IP最后几位的方法
2016/11/16 PHP
Ubuntu上安装yaf扩展的方法
2018/01/29 PHP
取得传值的函数
2006/10/27 Javascript
Javascript 表单之间的数据传递代码
2008/12/04 Javascript
Javascript 布尔型分析
2008/12/22 Javascript
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
2011/10/06 Javascript
显示今天的日期js代码(阳历和农历)
2014/09/30 Javascript
jQuery中ajax的post()方法用法实例
2014/12/26 Javascript
javascript获取四位数字或者字母的随机数
2015/01/09 Javascript
javascript实现倒计时并弹窗提示特效
2015/06/05 Javascript
易操作的jQuery表单提示插件
2015/12/01 Javascript
Highcharts学习之坐标轴
2016/08/02 Javascript
jquery实现ajax提交表单信息的简单方法(推荐)
2016/08/24 Javascript
JS比较两个数值的大小实例
2016/11/25 Javascript
JavaScript变量声明var,let.const及区别浅析
2018/04/23 Javascript
vue+iview分页组件的封装
2020/11/17 Vue.js
vue浏览器返回监听的具体步骤
2021/02/03 Vue.js
[05:31]DOTA2英雄梦之声_第08期_莉娜
2014/06/23 DOTA
[01:03:36]Ti4 循环赛第三日DK vs Titan
2014/07/12 DOTA
Python实现解析Bit Torrent种子文件内容的方法
2017/08/29 Python
Python随机函数库random的使用方法详解
2019/08/21 Python
Django Haystack 全文检索与关键词高亮的实现
2020/02/17 Python
css3 flex布局 justify-content:space-between 最后一行左对齐
2020/01/02 HTML / CSS
京东港澳售:京东直邮港澳台
2018/01/31 全球购物
Sneaker Studio波兰:购买运动鞋
2018/04/28 全球购物
捷克钓鱼用品网上商店:Parys.cz
2018/06/15 全球购物
匡威德国官网:Converse德国
2019/01/26 全球购物
一道写SQL的面试题和答案
2013/11/19 面试题
一道Delphi上机题
2012/06/04 面试题
写自荐信有哪些不宜?
2013/10/17 职场文书
《云雀的心愿》教学反思
2016/02/23 职场文书
vue实现锚点定位功能
2021/06/29 Vue.js