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