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

Posted on by

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

因為瀏覽器是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() 
} }

當然我也看過一些博客，總結瞭下 如何更好的解決

provide / inject 組合

作用：允許一個祖先組件向其所有子孫後代註入一個依賴，不論組件層次有多深，並在起上下遊關系成立的時間裡始終生效。

在你的App.vue頁面裡面

聲明reload方法，控制router-view的顯示或隱藏，從而控制頁面的再次加載

然後在你的詳情頁面

tableList.vue:

在頁面註入App.vue組件提供（provide）的 reload 依賴，在邏輯完成之後（刪除或添加…）,直接this.reload()調用，即可刷新當前頁面。

解釋下：

  • provide：選項應該是一個對象或返回一個對象的函數。該對象包含可註入其子孫的屬性。
  • inject：一個字符串數組，或一個對象，對象的 key 是本地的綁定名

提示：provide 和 inject 綁定並不是可響應的。這是刻意為之的。如果你傳入瞭一個可監聽的對象，那麼其對象的屬性還是可響應的。

當然你不能 是在created裡調用getData(), 在getData裡又調用瞭this.reload().

這樣會導致死循環的 ，所以要合理的運用就這個方法

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：