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