在開發過程中經常會發現當頁面明明不應該出現的元素或內容會閃現一下然後消失，最近研究了一下這個問題的原因和解決辦法，這裡和大家分享一下。

1.閃現的原因

這個問題是因為Vue要等到HTML DOM載入完成後才會執行JS的編譯，所以對使用的指令如 v-if , v-show 或者使用了插值表示式 {{}} 都會出現閃現的情況。因為在這些判斷條件或表示式執行之前，DOM已經渲染出來了，之後Vue才會執行相應的JS程式碼。

2.解決的辦法

其實在瞭解了原因之後我們就有了大概的思路，既然是在JS執行之前會出現，那就讓元素在JS執行之前都保持不顯示就好了。那事情就分為兩步：
•選擇在JS執行前要隱藏的元素
•新增display:none樣式

如何只定位JS執行前的元素呢？Vue有一個指令 v-cloak ，它的特殊之處在於 保持在元素上直到關聯例項結束編譯 。就是說這個屬性會一直在元素上，直到編譯結束。只需要在需要隱藏的元素上增加 v-cloak 指令即可。

carbon (3).png

接下來在CSS中定義隱藏樣式即可：

到這裡，這個問題就解決了。Vue是前端技術的一次大的躍進，有坑並不可怕，相信辦法總比問題多。
發現文章中的錯誤，或者有更好的建議，歡迎評論或進前端全棧群：866109386，來交流討論吹水。