v-cloak 實現vue實例未編譯完前不顯示

前言：

由於網速原因，（ps：之前同事無意間在網速很差的情況下測出的）在使用vue開發時，會由於vue實例還沒編譯成功的時候數據綁定的"Mustache"標簽會閃現一下，造成不好的用戶體驗。於是想起了可以通過v-cloak指令來隱藏未編譯完成的Mustache標簽。

看截圖：

ps：在測試網速在較差的情況下頁面的展示情況，可以通過chrome開發者工具的Network進行網速的限制，看截圖：

v-cloak

用法：

這個指令保持在元素上直到關聯實例結束編譯。和 CSS 規則如 [v-cloak] { display: none } 一起用時，這個指令可以隱藏未編譯的 Mustache 標簽直到實例准備完畢。

示例：

[v-cloak] {
    display:none;
}

<div v-cloak>
  {{ message }}
</div>

不會顯示，直到編譯結束。

總結

通過使用v-cloak我們就可以很好的避免了vue實例還未編譯完成之前不會顯示Mustache標簽了，但是這樣還是存在一個問題，就是白屏狀態，於是我們可以在v-cloak的兄弟節點通過css設置一個loading的動畫，讓用戶知道頁面還在加載。

看截圖：

而vue實例的創建是在mounted狀態時候完成的，於是我們可以通過data設置一個loading狀態值，當實例編譯完成后就調用mounted鈎子修改修飾loading狀態的值實現隱藏。這樣我們就能在網速比較差的情況下也能給用戶一個比較好的體驗。

補充：

v-cloak無效的情況：

1.在實際項目開發中，挺多是通過import來加載css文件的，而import進來的樣式文件是DOM載入后才引進來的，如果將[v-cloak]寫在import進來的樣式文件上仍會出現{{}}閃爍的問題，可以通過寫在link標簽引進來的css文件中或者設置內聯樣式。

2.還有的情況就是優先級的問題，[v-cloak]設置的樣式被覆蓋了，也可以通過暴力的手段，通過設置!important來提高優先級。

 

參考資料：

vue官網：https://cn.vuejs.org/v2/api/#v-cloak