單頁面Vue頁面刷新出現閃爍問題及解決

2022-07-28 14:01:12

分析原因: 為什麼重新整理會出現閃爍的問題?

因為瀏覽器是html從上到下執行，

先執行Dom元素

然後執行javaScript元素

當走到javaScript時，Dom元素已經開始走動，所以如果網慢的話，會顯示的特別明顯

解決方法: 使用 v-cloak 用法

v-cloak指令和 css規則 [v-cloak] {display:none} 一起用時，這個指令可以隱藏未編譯的Mustache標籤直到範例準備完畢。

原理：

帶有v-clock的的元素設定為display:none，隱藏掉，在等到vue解析到帶有v-clock的節點時候，會把attribute和class同時remove掉，這樣就可以實現防止節點的閃爍。

範例：

[v-cloak] {
display: none; 
} 
<div v-cloak>
{{ message }}
</div>

圖解：

html 程式碼

加在掛載點(#app),可以讓整個頁面在未載入完JS時,整個頁面都不渲染, 如果不需要,只需要在對應閃爍的標籤中加v-cloak即可

css 程式碼

關於Vue重新整理頁面問題

Vue 中是單頁面，當然需要重新整理資料咯

你一定遇到這樣的需求：

比如在刪除或者增加一條記錄的時候希望當前頁面可以重新重新整理或者這個頁面有個元件，但是這個元件裡面的點選事件還是到當前頁面

如何解決

1.在使用Vue-router做專案時，會遇到如/serviceId/:id這樣只改變id號的場景。由於router-view是複用的，單純的改變id號並不會重新整理router-view，而這並不是我們所期望的結果。

2.我們可以在點選事件上 window.reload()，或者router.go(0)重新整理時，強制重新整理整個頁面。整個瀏覽器進行了重新載入，閃爍，體驗不好

3.使用watch的方法，具體的可以看一下官方檔案

watch: { 
'$route': function (to, from) { 
       this.$store.dispatch('updateActiveTemplateId', 
       this.$route.params.templateId) // 通過更新Vuex中的store的資料，讓資料發生變化 
           this.getTemplateById() 
} }

當然我也看過一些部落格，總結了下如何更好的解決