浅谈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 相关文章推荐
JQuery 插件制作实践 xMarquee插件V1.0
Apr 02 Javascript
『JavaScript』限制Input只能输入数字实现思路及代码
Apr 22 Javascript
基于JQuery实现图片轮播效果(焦点图)
Feb 02 Javascript
巧用Javascript的逻辑运算符
Dec 02 Javascript
关于ES6的六个小特性(二)
Feb 20 Javascript
Bootstrap进度条实现代码解析
Mar 07 Javascript
浅谈JavaScript作用域和闭包
Sep 18 Javascript
JavaScript 高性能数组去重的方法
Sep 20 Javascript
atom-design(Vue.js移动端组件库)手势组件使用教程
May 16 Javascript
JS实现排行榜文字向上滚动轮播效果
Nov 26 Javascript
vue路由切换时取消之前的所有请求操作
Sep 01 Javascript
vue等两个接口都返回结果再执行下一步的实例
Sep 08 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
星际争霸兵种名称对照表
2020/03/04 星际争霸
PHP获取文件绝对路径的代码(上一级目录)
2011/05/29 PHP
通过curl模拟post和get方式提交的表单类
2014/04/23 PHP
php中namespace use用法实例分析
2016/01/22 PHP
深入认识JavaScript中的函数
2007/01/22 Javascript
JS 强制设为首页的代码
2009/01/31 Javascript
javascript 按键事件(兼容各浏览器)
2013/12/20 Javascript
js 去掉空格实例 Trim() LTrim() RTrim()
2014/01/07 Javascript
node.js中的path.resolve方法使用说明
2014/12/08 Javascript
js与jquery实时监听输入框值的oninput与onpropertychange方法
2015/02/05 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
2015/10/31 Javascript
在 Express 中使用模板引擎
2015/12/10 Javascript
简单的Vue SSR的示例代码
2018/01/12 Javascript
node实现登录图片验证码的示例代码
2018/04/20 Javascript
vue-cli初始化项目中使用less的方法
2018/08/09 Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
2018/12/06 jQuery
JavaScript 判断iPhone X Series机型的方法
2019/01/28 Javascript
layui table 多行删除(id获取)的方法
2019/09/12 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
2020/06/19 Javascript
零基础写python爬虫之神器正则表达式
2014/11/06 Python
python在非root权限下的安装方法
2018/01/23 Python
浅谈DataFrame和SparkSql取值误区
2018/06/09 Python
python 读取视频,处理后,实时计算帧数fps的方法
2018/07/10 Python
Python中PyQt5/PySide2的按钮控件使用实例
2019/08/17 Python
python-opencv获取二值图像轮廓及中心点坐标的代码
2019/08/27 Python
python修改FTP服务器上的文件名
2019/09/11 Python
tensorflow 保存模型和取出中间权重例子
2020/01/24 Python
python手写均值滤波
2020/02/19 Python
Spartoo美国:欧洲排名第一的在线时装零售商
2019/12/12 全球购物
中学生运动会入场词
2014/02/12 职场文书
社区娱乐活动方案
2014/08/21 职场文书
解决mysql的int型主键自增问题
2021/07/15 MySQL
攻略丨滑雪究竟该选哪款对讲机?
2022/02/18 无线电
mybatis-plus模糊查询指定字段
2022/04/28 Java/Android
服务器SVN搭建图文安装过程
2022/06/21 Servers
JS高级程序设计之class继承重点详解
2022/07/07 Javascript