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

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

看截圖：

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

用法：這個指令保持在元素上直到關聯例項結束編譯。和 css 規則如[v-cloak]一起用時，這個指令可以隱藏未編譯的 mustache 標籤直到例項準備完畢。

示例：

[v-cloak]

<
div 
v-cloak
>
}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來提高優先順序。