淺談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種方法與區(qū)別,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2022-03-03
這篇文章主要介紹了Vue實現鼠標經過文字顯示懸浮框效果，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-10-10
根據Vue2.0官方文檔關于父子組件通訊的原則，父組件通過prop傳遞數據給子組件，子組件觸發(fā)事件給父組件，這篇文章主要介紹了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項目打包過后發(fā)現地址錯了或者發(fā)布到別的服務器發(fā)現請求的地址不對,每次都要去重新打包,太浪費時間,下面這篇文章主要給大家介紹了關于Vue項目打包后可修改基礎接口地址配置的具體操作,需要的朋友可以參考下2022-08-08