使用 v-cloak 防止頁面加載時出現 vuejs 的變量名

轉載自：http://www.sunzhongwei.com/hide-vuejs-variable-with-v-cloak-when-page-loading

使用 vuejs 做了一個簡單的功能頁面，邏輯是，頁面加載后獲取當前的經緯度，然后通過 ajax 從后台拉取附近的小區列表。但是 bug 出現了，在顯示小區列表之前，會閃現小區名對應的 vuejs 變量名。

案發現場的 HTML 代碼

<ul v-for="item in items">
  <li>{{ item.name }}</li>
</ul>

頁面加載時，會閃現

{{ item.name }}

Google 了一下，發現 vuejs 內置的 directive v-cloak 可以解決這個問題。非常簡單

HTML 修改成

<ul v-cloak v-for="item in items">
  <li>{{ item.name }}</li>
</ul>

CSS 中添加

[v-cloak] {
  display: none;
}

搞定！

但是原理是什么呢？

這段 CSS 的含義是，包含 v-cloak (cloak n. 披風，斗篷；vt. 遮蓋，掩蓋) 屬性的 html 標簽在頁面初始化時會被隱藏。

在 vuejs instance ready 之后，v-cloak 屬性會被自動去除，也就是對應的標簽會變為可見。問題來了，怎么才算是 ready 呢？這就需要了解 vuejs instance 的生命周期了。抽時間整理一下。