.jpg)
v-cloak用于解決vue初始化前用戶看到未編譯模板的問題。1.它通過配合css隱藏未渲染的元素，待vue渲染完成后自動(dòng)移除屬性顯示內(nèi)容；2.常見于靜態(tài)html與vue混合、加載較慢或用戶體驗(yàn)要求高的場(chǎng)景；3.使用時(shí)需加在任意需要隱藏的元素上并編寫對(duì)應(yīng)css；4.注意spa項(xiàng)目中通常無需使用，可用v-text或loading屏替代。正確使用可提升頁面加載時(shí)的視覺一致性。
Vue 的 v-cloak 指令主要解決的是頁面在 Vue 初始化完成前，用戶短暫看到未編譯的 Mustache 標(biāo)簽（比如 {{ data }}）的問題。
這個(gè)問題通常發(fā)生在頁面加載初期、Vue 還沒來得及渲染數(shù)據(jù)的時(shí)候。如果網(wǎng)絡(luò)較慢或者 JavaScript 執(zhí)行稍有延遲，用戶可能會(huì)看到類似 {{ message }} 這樣的原始模板字符，這不僅影響體驗(yàn)，也顯得不夠?qū)I(yè)。
什么是 v-cloak？
v-cloak 是 Vue 提供的一個(gè)指令，它本身不需要任何值，只要寫上 v-cloak 就行。它的作用很簡(jiǎn)單：防止未渲染的數(shù)據(jù)暴露出來。
立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；
它的實(shí)現(xiàn)原理是配合 CSS 使用。在 Vue 編譯完成之前，帶有 v-cloak 的元素會(huì)被隱藏；一旦 Vue 完成渲染，這個(gè)屬性就會(huì)被自動(dòng)移除，元素自然顯示出來。
<div id="app" v-cloak> {{ message }} </div>
對(duì)應(yīng)的 CSS：
[v-cloak] { display: none; }
這樣，在 Vue 渲染完成之前，整個(gè) div 都不會(huì)顯示，避免了“閃爍”問題。
什么時(shí)候用 v-cloak？
使用 v-cloak 最常見的場(chǎng)景是：
- 頁面中有大量靜態(tài) HTML 和 Vue 模板混合的內(nèi)容
- 網(wǎng)站加載速度較慢（比如 JS 加載慢）
- 對(duì)用戶體驗(yàn)要求較高，不想讓用戶看到原始模板
舉個(gè)例子：你寫了一個(gè)登錄頁，上面有一段歡迎語句 {{ welcomeText }}。如果不用 v-cloak，用戶在 Vue 加載完成前可能看到 {{ welcomeText }}，而不是空白或隱藏狀態(tài)。
怎么正確使用 v-cloak？
要讓 v-cloak 正常工作，需要注意幾點(diǎn)：
- 必須配合 CSS 使用，否則無效。
- 可以加在任意元素上，不一定是根節(jié)點(diǎn)。
- 如果你用了組件化開發(fā)（如 Vue 單文件組件），可能已經(jīng)封裝好了，不需要手動(dòng)加。
常用做法如下：
<div id="app" v-cloak> <h1>{{ title }}</h1> <p>{{ content }}</p> </div>
CSS 寫法：
[v-cloak] { display: none; }
也可以根據(jù)需要只隱藏某個(gè)局部內(nèi)容，比如：
<span v-cloak>{{ username }}</span>
這樣就能只屏蔽用戶名那一小塊內(nèi)容，而其他部分正常顯示。
注意事項(xiàng)和替代方案
雖然 v-cloak 很實(shí)用，但也不是萬能的：
- 如果項(xiàng)目是通過構(gòu)建工具打包的 SPA（單頁應(yīng)用），一般會(huì)先加載一個(gè) loading 屏幕，等 Vue 初始化完成后才展示內(nèi)容，這種情況下其實(shí)可以不用 v-cloak
- 有些開發(fā)者也會(huì)選擇使用 v-text 或 v-html 來代替文本插值，也能一定程度上避免原始數(shù)據(jù)暴露
不過對(duì)于簡(jiǎn)單的 Vue 項(xiàng)目或者直接引入 CDN 的方式來說，v-cloak 依然是最方便、最直接的解決方案。
基本上就這些。合理使用 v-cloak 可以提升頁面加載時(shí)的視覺一致性，雖然看起來是個(gè)小細(xì)節(jié)，但在實(shí)際項(xiàng)目中還是挺有用的。
.png)
