浅谈vue异步数据影响页面渲染
更新时间：2019年10月29日 08:35:49 作者：zjr11111
今天小编就为大家分享一篇浅谈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异步数据影响页面渲染就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要给大家介绍了关于vue跳转页面常用的4种方法与区别,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2022-03-03
这篇文章主要介绍了Vue实现鼠标经过文字显示悬浮框效果，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-10-10
根据Vue2.0官方文档关于父子组件通讯的原则，父组件通过prop传递数据给子组件，子组件触发事件给父组件，这篇文章主要介绍了vue中@click绑定事件点击不生效的解决方案,需要的朋友可以参考下2022-12-12
ElementUI中el-dropdown-item点击事件无效问题
这篇文章主要介绍了ElementUI中el-dropdown-item点击事件无效问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要介绍了在vue项目中如何获取视频的时长，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了vue3使用ref的性能警告问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
今天小编就为大家分享一篇vue form 表单提交后刷新页面的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vuejs中父子组件之间通信方法,结合实例形式详细分析了vue.js父组件向子组件传递消息以及子组件向父组件传递消息具体操作实现技巧,需要的朋友可以参考下2020-01-01
这篇文章主要介绍了微信jssdk逻辑在vue中的运用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
vue项目打包过后发现地址错了或者发布到别的服务器发现请求的地址不对,每次都要去重新打包,太浪费时间,下面这篇文章主要给大家介绍了关于Vue项目打包后可修改基础接口地址配置的具体操作,需要的朋友可以参考下2022-08-08
最新评论