v-cloak 在 Vue.js 中的作用是什麼？

v-cloak 是什麼？何時會需要用到 v-cloak？

當使用 in-DOM 模板時，如果沒使用 v-cloak 的話可能會出現「尚未編譯執行完成的模板語法 (flash of un-compiled templates)」。因此訪客可能會看到原始的 mustache 標籤與指令式（例如：{{ variable }} 或是 v-for 等指令式），直到 Vue.JS 渲染完成後才使用正確的內容替換掉這些標籤與指令式。

v-cloak 會一直保留在元素上，直到關聯的元件實例被掛載 (mounted)，通常會結合 CSS 規則，例如 [v-cloak] { display: none }，它可以用來隱藏原始模板，直到元件準備好。

這個方法無論是在 Vue2 或是 Vue3

在 Vue.js 中如何實際使用 v-cloak？

[v-cloak] {
  display: none;
}

<div v-cloak>
  {{ message }}
</div>

div 元素會直到編譯完成、元件被掛載後才會顯示。

參考： VueJS 官方文件

你可能也想知道：VueJS 中 v-show, v-if, v-else 是什麼？有什麼差異？