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