小項目中怎麼防止Vue的閃現畫面

一句話總結

HTML: 元素加上v-cloak

CSS: [v-cloak]{display: none}

過程

頁面剛加載的時候鬍子語法會顯示出來。

v-cloak是VueJS小型項目中提高用戶體驗簡單且重要的方法。

用法

HTML中在你須要組織閃現的標籤上加上v-cloak

<div id="app">  
 <nav>blabla</nav>  
 <main v-cloak>{{text}}</main>  
</div>

CSS中給v-cloak設定樣式，這個樣式是隻有【在vue實例編譯結束前】應用的樣式。

[v-cloak]{  
 display: none;  
}

原理

我沒讀完源碼，可是v-cloak的原理我大概理解一點：

首先是CSS選擇器，用[target]選擇的是「帶有 target 屬性全部元素。」。能夠點這裏複習選擇器。

那麼[v-cloak]選擇出來的就是全部帶有v-cloak屬性的元素了。

實例初始化完成以後，VueJS中會把Vue中特有的attribute去掉。在實例初始化完成以前，上面寫的main的HTML代碼實際是這樣的：

<main id="main" class="row" v-cloak="">

而後加上CSS，就把全部帶有v-cloak的元素都display: block了。

其實不止是v-cloak，你能夠用v-if來試試，CSS裏使用[v-if]{display:none}，效果看起來是同樣的。和v-cloak同樣，v-if也是在實例編譯完以後去掉。

源碼

而後我剛纔去讀了一下源碼，大概是這一段，感興趣的大佬能夠去搜搜讀讀理解理解。

if (isRealElement) {  
 // mounting to a real element  
 // check if this is server-rendered content and if we can perform  
 // a successful hydration.  
 if (oldVnode.nodeType === 1 && oldVnode.hasAttribute(SSR_ATTR)) {  
 oldVnode.removeAttribute(SSR_ATTR);  
 hydrating = true;  
 }  
}

尾巴

1. 每次水博客都怕本身理解錯了，但願我能儘快成長吧。