返回 Vue 3 課程
20
Vue 3 學習之旅
進階應用

預渲染指令：v-cloak

·6 分鐘閱讀·進階應用

摘要

v-cloak 是一個特殊指令，用於配合 CSS 規則，解決在 Vue 應用掛載完成前，使用者短暫看到未編譯模板標籤（如 {{ message }}）的「花屏」問題。

定義與說明

v-cloak 會保持在元素上，直到其所屬的 Vue 實例完成編譯。它需要搭配一條 CSS 規則 [v-cloak] { display: none; } 來生效。當 Vue 準備就緒後，會自動移除元素上的 v-cloak 屬性，此時元素就會正常顯示。

實作範例

CSS + HTML
/* 在你的 CSS 中 */
[v-cloak] {
  display: none;
}

<!-- 在你的 HTML 根元素上 -->
<div id="app" v-cloak>
  <p>{{ message }}</p>
</div>

結論

v-cloak 是一個簡單而有效的技巧，用於提升使用者在應用程式載入初期的視覺體驗，避免了不專業的內容閃現。

v-cloak 預渲染 使用者體驗