小項目中如何防止Vue的閃現畫面效果

這篇文章將為大家詳細講解有關小項目中如何防止Vue的閃現畫面效果，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

Vue的優點

Vue具體輕量級框架、簡單易學、雙向數據綁定、組件化、數據和結構的分離、虛擬DOM、運行速度快等優勢，Vue中頁面使用的是局部刷新，不用每次跳轉頁面都要請求所有數據和dom，可以大大提升訪問速度和用戶體驗。

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的閃現畫面效果”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。