小專案中怎麼防止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;  
 }  
}

到此這篇關於小專案中怎麼防止Vue的閃現畫面效果的文章就介紹到這了,更多相關小項目vue閃現畫面內容請搜尋downcodes.com以前的文章或繼續瀏覽下面的相關文章，希望大家以後多多支援downcodes.com！