單頁面Vue頁面刷新出現(xiàn)閃爍問題及解決
分析原因: 為什么刷新會出現(xiàn)閃爍的問題?
因為瀏覽器是html從上到下執(zhí)行,
先執(zhí)行Dom元素
然后執(zhí)行javaScript元素
當(dāng)走到j(luò)avaScript時,Dom元素已經(jīng)開始走動,所以如果網(wǎng)慢的話,會顯示的特別明顯
解決方法: 使用 v-cloak 用法
v-cloak指令 和 css規(guī)則 [v-cloak] {display:none} 一起用時,這個指令可以隱藏未編譯的Mustache標(biāo)簽直到實例準(zhǔn)備完畢。
原理:
帶有v-clock的的元素設(shè)置為display:none,隱藏掉,在等到vue解析到帶有v-clock的節(jié)點時候,會把a(bǔ)ttribute和class同時remove掉,這樣就可以實現(xiàn)防止節(jié)點的閃爍。
實例:
[v-cloak] { display: none; } <div v-cloak> {{ message }} </div>
圖解:
html 代碼
加在掛載點(#app),可以讓整個頁面在未加載完JS時,整個頁面都不渲染, 如果不需要,只需要在對應(yīng)閃爍的標(biāo)簽中加v-cloak即可
css 代碼
關(guān)于Vue刷新頁面問題
Vue 中是單頁面,當(dāng)然需要刷新數(shù)據(jù)咯
你一定遇到這樣的需求:
比如在刪除或者增加一條記錄的時候希望當(dāng)前頁面可以重新刷新或者這個頁面有個組件 ,但是這個組件里面的點擊事件還是到當(dāng)前頁面
如何解決
1.在使用Vue-router做項目時,會遇到如/serviceId/:id這樣只改變id號的場景。由于router-view是復(fù)用的,單純的改變id號并不會刷新router-view,而這并不是我們所期望的結(jié)果。
2.我們可以在點擊事件上 window.reload(),或者router.go(0)刷新時,強(qiáng)制刷新整個頁面。整個瀏覽器進(jìn)行了重新加載,閃爍,體驗不好
3.使用watch的方法,具體的可以看一下官方文檔
watch: {? '$route': function (to, from) {? ? ? ? ?this.$store.dispatch('updateActiveTemplateId',? ? ? ? ?this.$route.params.templateId) // 通過更新Vuex中的store的數(shù)據(jù),讓數(shù)據(jù)發(fā)生變化? ? ? ? ? ? ?this.getTemplateById()? } }
當(dāng)然我也看過一些博客,總結(jié)了下 如何更好的解決
provide / inject 組合
作用:允許一個祖先組件向其所有子孫后代注入一個依賴,不論組件層次有多深,并在起上下游關(guān)系成立的時間里始終生效。
在你的App.vue頁面里面
聲明reload方法,控制router-view的顯示或隱藏,從而控制頁面的再次加載
然后在你的詳情頁面
tableList.vue:
在頁面注入App.vue組件提供(provide)的 reload 依賴,在邏輯完成之后(刪除或添加...),直接this.reload()調(diào)用,即可刷新當(dāng)前頁面。
解釋下:
provide
:選項應(yīng)該是一個對象或返回一個對象的函數(shù)。該對象包含可注入其子孫的屬性。inject
:一個字符串?dāng)?shù)組,或一個對象,對象的 key 是本地的綁定名
提示:provide 和 inject 綁定并不是可響應(yīng)的。這是刻意為之的。如果你傳入了一個可監(jiān)聽的對象,那么其對象的屬性還是可響應(yīng)的。
當(dāng)然你不能 是在created里調(diào)用getData(), 在getData里又調(diào)用了this.reload().
這樣會導(dǎo)致死循環(huán)的 ,所以要合理的運(yùn)用就這個方法
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
在vue中v-for循環(huán)遍歷圖片不顯示錯誤的解決方案
這篇文章主要介紹了在vue中v-for循環(huán)遍歷圖片不顯示錯誤的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-01-01vue+AI智能機(jī)器人回復(fù)功能實現(xiàn)
這篇文章主要為大家詳細(xì)介紹了vue+AI智能機(jī)器人回復(fù)功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-07-07vue-cli解決IE瀏覽器sockjs-client錯誤方法
這篇文章主要為大家介紹了vue-cli解決IE瀏覽器sockjs-client錯誤方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08vue3數(shù)據(jù)可視化實現(xiàn)數(shù)字滾動特效代碼
這篇文章主要介紹了vue3數(shù)據(jù)可視化實現(xiàn)數(shù)字滾動特效,實現(xiàn)思路是使用Vue.component定義公共組件,使用window.requestAnimationFrame(首選,次選setTimeout)來循環(huán)數(shù)字動畫,詳細(xì)代碼跟隨小編一起看看吧2022-09-09vue項目使用luckyexcel預(yù)覽excel表格功能(心路歷程)
這篇文章主要介紹了vue項目使用luckyexcel預(yù)覽excel表格,我總共嘗試了2種方法預(yù)覽excel,均可實現(xiàn),還發(fā)現(xiàn)一種方法可以實現(xiàn),需要后端配合,叫做KKfileview,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10vue使用this.$message不生效的部分原因及解決方案
這篇文章主要介紹了vue使用this.$message不生效的部分原因及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-09-09