转载自：

使用 vuejs 做了一个简单的功能页面，逻辑是，页面加载后获取当前的经纬度，然后通过 ajax 从后台拉取附近的小区列表。但是 bug 出现了，在显示小区列表之前，会闪现小区名对应的 vuejs 变量名。

案发现场的 HTML 代码

    
  
     
{
   { item.name }}
    

页面加载时，会闪现

{

{ item.name }}

Google 了一下，发现 vuejs 内置的 directive v-cloak 可以解决这个问题。非常简单

HTML 修改成

    
  
     
{
   { item.name }}
    

CSS 中添加

[v-cloak] {  display: none;}

搞定！

但是原理是什么呢？

这段 CSS 的含义是，包含 v-cloak (cloak n. 披风，斗篷；vt. 遮盖，掩盖) 属性的 html 标签在页面初始化时会被隐藏。

在 vuejs instance ready 之后，v-cloak 属性会被自动去除，也就是对应的标签会变为可见。问题来了，怎么才算是 ready 呢？这就需要了解 vuejs instance 的生命周期了。抽时间整理一下。