浅谈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 相关文章推荐
表单(FORM)的一些实用效果代码
Mar 25 Javascript
js中typeof的用法汇总
Dec 12 Javascript
JS中Date日期函数中的参数使用介绍
Jan 02 Javascript
JS完整获取IE浏览器信息包括类型、版本、语言等等
May 22 Javascript
JavaScript返回上一页的三种方法及区别介绍
Jul 04 Javascript
javascript解析xml实现省市县三级联动的方法
Jul 25 Javascript
javascript设计模式之模块模式学习笔记
Feb 15 Javascript
小发现之浅谈location.search与location.hash的问题
Jun 23 Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
Mar 19 Javascript
使用webpack4编译并压缩ES6代码的方法示例
Apr 24 Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
Jul 26 Javascript
node.js通过url读取文件
Oct 16 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
「OVERLORD」动画重要删减!雅儿贝德的背叛?至尊猎杀队结成
2020/04/09 日漫
PHP实现数据库统计时间戳按天分组输出数据的方法
2017/10/10 PHP
PHP输出Excel PHPExcel的方法
2018/07/26 PHP
laravel框架中间件 except 和 only 的用法示例
2019/07/12 PHP
php实现简单四则运算器
2020/11/29 PHP
对联广告js flash激活
2006/10/19 Javascript
js iframe跨域访问(同主域/非同主域)分别深入介绍
2013/01/24 Javascript
Js参数值中含有单引号或双引号问题的解决方法
2013/11/06 Javascript
解析JavaScript中的不可见数据类型
2013/12/02 Javascript
js面向对象编程之如何实现方法重载
2014/07/02 Javascript
javascript获得当前的信息的一些常用命令
2015/02/25 Javascript
jQuery使用post方法提交数据实例
2015/03/25 Javascript
JS在一定时间内跳转页面及各种刷新页面的实现方法
2016/05/26 Javascript
JS中Array数组学习总结
2017/01/18 Javascript
jQuery实现简单漂亮的Nav导航菜单效果
2017/03/29 jQuery
Vue 页面切换效果之 BubbleTransition(推荐)
2018/04/08 Javascript
JavaScript实现表单注册、表单验证、运算符功能
2018/10/15 Javascript
JQuery animate动画应用示例
2019/05/14 jQuery
浅谈Vue组件单元测试究竟测试什么
2020/02/05 Javascript
Node.js+Vue脚手架环境搭建的方法步骤
2020/03/08 Javascript
[02:44]DOTA2英雄基础教程 克林克兹
2014/01/15 DOTA
[32:39]完美世界DOTA2联赛循环赛 Forest vs Inki BO2第一场 11.04
2020/11/04 DOTA
基于Python实现一个简单的银行转账操作
2016/03/06 Python
浅谈python迭代器
2017/11/08 Python
Python实现SQL注入检测插件实例代码
2019/02/02 Python
利用ctypes获取numpy数组的指针方法
2019/02/12 Python
Python 线程池用法简单示例
2019/10/02 Python
Django 解决model 反向引用中的related_name问题
2020/05/19 Python
Python logging模块原理解析及应用
2020/08/13 Python
HTML5调用手机摄像头拍照的实现思路及代码
2014/06/15 HTML / CSS
国际贸易实训报告
2014/11/05 职场文书
2014年房地产销售工作总结
2014/12/01 职场文书
个性与发展自我评价
2015/03/06 职场文书
学校教代会开幕词
2016/03/04 职场文书
干货:企业内部人才推荐奖励方案!
2019/07/09 职场文书
CSS 新特性 contain控制页面的重绘与重排问题
2021/04/30 HTML / CSS