在開發(fā)過程中經(jīng)常會發(fā)現(xiàn)當頁面明明不應該出現(xiàn)的元素或內(nèi)容會閃現(xiàn)一下然后消失，最近研究了一下這個問題的原因和解決辦法，這里和大家分享一下。
1.閃現(xiàn)的原因
這個問題是因為Vue要等到HTML DOM加載完成后才會執(zhí)行JS的編譯，所以對使用的指令如 v-if, v-show 或者使用了插值表達式 {{}} 都會出現(xiàn)閃現(xiàn)的情況。因為在這些判斷條件或表達式執(zhí)行之前，DOM已經(jīng)渲染出來了，之后Vue才會執(zhí)行相應的JS代碼。
2.解決的辦法
其實在了解了原因之后我們就有了大概的思路，既然是在JS執(zhí)行之前會出現(xiàn)，那就讓元素在JS執(zhí)行之前都保持不顯示就好了。那事情就分為兩步：
- 選擇在JS執(zhí)行前要隱藏的元素
- 添加display:none樣式
如何只定位JS執(zhí)行前的元素呢？Vue有一個指令 v-cloak，它的特殊之處在于保持在元素上直到關聯(lián)實例結(jié)束編譯。就是說這個屬性會一直在元素上，直到編譯結(jié)束。只需要在需要隱藏的元素上增加 v-cloak 指令即可。
carbon (3).png
接下來在CSS中定義隱藏樣式即可：
image.png
到這里，這個問題就解決了。Vue是前端技術(shù)的一次大的躍進，有坑并不可怕，相信辦法總比問題多。
