淺談vue異步數(shù)據(jù)影響頁面渲染
更新時間：2019年10月29日 08:35:49 作者：zjr11111
今天小編就為大家分享一篇淺談vue異步數(shù)據(jù)影響頁面渲染，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
今天遇到一個問題，要保證頁面渲染前請求的數(shù)據(jù)已經(jīng)得到了
由于user是在異步請求之后保存在session中，而在頁面渲染時session中還沒有user，頁面直接報錯。
因此我希望能在所有請求都得到后再去做頁面的渲染。
1.先把id為app的div用v-if="appShow",定義appShow為false進行隱藏，避免渲染
2.寫計數(shù)器，每1ms進行一次查詢，如果session中已經(jīng)有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異步數(shù)據(jù)影響頁面渲染就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue項目報錯:Uncaught?SyntaxError:?Unexpected?token?'＜&a
最近在做vue項目時,需要引入一個第三方的js文件,在index.html中通過以下方式引入JS文件編譯后就報了這個問題,這篇文章主要給大家介紹了關(guān)于Vue項目報錯:Uncaught?SyntaxError:?Unexpected?token?'＜'的解決方法,需要的朋友可以參考下2022-08-08
Vue作為一款流行的前端框架,提供了一種數(shù)據(jù)驅(qū)動的方式來實現(xiàn)目錄樹,本文主要介紹了vue?目錄樹的展開與關(guān)閉的實現(xiàn),具有一定的參考價值,感興趣的可以了解一下2023-11-11
這篇文章主要為大家詳細介紹了Vue.js組件實現(xiàn)選項卡以及切換特效，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
Vuex Store 數(shù)據(jù)在頁面刷新后丟失的解決方法
當我們使用 Vue.js 和 Vuex 進行狀態(tài)管理時,一個常見的問題是頁面刷新會導致 Vuex store 中的數(shù)據(jù)丟失,本文將詳細介紹解決 Vuex Store 數(shù)據(jù)在頁面刷新后丟失的方法,感興趣的朋友一起看看吧2024-08-08
這篇文章主要介紹了VUE腳手架下載和配置，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
這篇文章主要介紹了Vue鼠標滾輪滾動切換路由效果的實現(xiàn)方法,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-08-08
本文主要給大家分享了vue項目的創(chuàng)建步驟以及vue路由router的相關(guān)知識點，非常的實用，有需要的小伙伴可以來參考下2020-01-01
這篇文章主要介紹了vue項目中仿element-ui彈框效果的實例代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04
本篇文章主要介紹了vue使用drag與drop實現(xiàn)拖拽的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
vue實現(xiàn)學生錄入系統(tǒng)之添加刪除功能
本文給大家?guī)硪粋€小案例基于vue實現(xiàn)學生錄入系統(tǒng)功能，代碼簡單易懂非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-07-07