首頁 >web前端 >js教程 >如何對vue渲染時閃爍{{}}進行處理

如何對vue渲染時閃爍{{}}進行處理

php中世界最好的语言原創: 2018-05-26 13:53:571269瀏覽

這次帶給大家如何對vue渲染時閃爍{{}}進行處理，對vue渲染時閃爍{{}}進行處理的注意事項有哪些，下面就是實戰案例，一起來看一下。

v-if和v-show可能是日常開發中最常用的兩個指令，雖然看上去兩者功能是類似的，但兩者還是有很大差別的。

v-if與v-show區別：

#在切換v-if 區塊時，Vue.js 有一個局部編譯/卸載過程，因為v-if 之中的模板也可能包括資料綁定或子元件。 v-if 是真實的條件渲染，因為它確保條件區塊在切換當中適當地銷毀與重建條件區塊內的事件監聽器和子元件。

v-if 也是惰性的：如果在初始渲染時條件為假，則什麼也不做－在條件第一次變成真時才開始局部編譯（編譯會被快取起來）。

相比之下，v-show 簡單得多——元素始終被編譯並保留，只是簡單地基於 CSS 切換。

簡單來說二者最大的差別是v-if只會在滿足條件時才會編譯，而v-show不管是否滿足條件總是會編譯，v-show的顯示與隱藏只是簡單的切換CSS的display屬性。

適用場景：

明白了二者的本質區別後什麼時候適合用v-if什麼時候用v-show也變得簡單了。

一般來說，v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。因此，如果需要頻繁切換 v-show 較好，如果在運行時條件不大可能改變 v-if 較好。

比如說現在很多頁面在不同端表現是不同的，最常見的是很多的APP頁面在微信端打開時頁面上會顯示下載的提示，而在APP內部則不會，像這樣的情況每個端的狀態在載入時就是確定的不會變的就適合用v-if，這樣在APP內開啟時顯示下載的部分直接就不會編譯。

而像頁面上元素根據不同條件顯示/隱藏這樣的地方用v-show是最合適的了，因為像這種基本上兩個狀態要頻繁切換，如上面所說，v- show的切換消耗是小於v-if的。

多條件

很多時候程式碼需要多條件判斷，但vue中只有v-if和v -else，沒有v-elseif這樣的指令。雖然沒有類似的指令，但依舊還是有幾種方法可以解決這個問題。

方法一:template

<p v-if="xxx"></p>
<template v-else>
<p v-if="yyy"></p>
<p v-else></p>
</template>

# 方法二：partical

元素是已註冊的partial 的插槽，partial在插入時被Vue 編譯。元素本身會被替換。元素需要指定 name 特性。

這貨讓人想起javaScript原生的fragement元素，但卻不是一個東西。 partial有靜態和動態之分，要解決上面的問題就要用到動態partial。

範例：

// 注册 partial
Vue.partial('my-partial', '<p>This is a partial! {{msg}}</p>')
<!-- 静态 partial -->
<partial name="my-partial"></partial>
<!-- 动态 partial -->
<!-- 渲染 partial，id === vm.partialId -->
<partial v-bind:name="partialId"></partial>

要解決多個條件的問題，我們就可以為每種情況預先註冊好各自的partial，然後將partial的name屬性綁定到判斷條件，這樣就能實現多個條件判斷。

其他：

1.v-if指令可以套用在template包裝元素上，而v-show不支援templete

2.將v-show應用在元件上時，因為指令的優先權 v-else 會出現問題，解決方法就是用另一個v-show 取代v-else

官方給的範例如下：

// 错误
<custom-component v-show="condition"></custom-component>
<p v-else>这可能也是一个组件</p>
// 正确做法
<custom-component v-show="condition"></custom-component>
<p v-show="!condition">这可能也是一个组件</p>

Vue頁面載入時v-show設定的隱藏元素出現導致頁面閃爍問題

在寫APP社群頁面的時候在某些地方用了v-show，在刷新頁面的時候就發現即便在邏輯判斷為false某些元素不該顯示時也會露個臉，一閃而過，元素快小還好，如果是特別大的地方看起來很不爽，於是上網搜了下看有沒有解決方法，結果還真有。

方法一: v-cloak

官方的解释就一句话：这个指令保持在元素上直到关联实例结束编译。

光看这句话一头雾水，后面紧接着说了用法：

和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

也就是说v-cloak指令可以像CSS选择器一样绑定一套CSS样式然后这套CSS会一直生效到实例编译结束。

示例代码：

// <p> 不会显示，直到编译结束。
[v-cloak] {
display: none;
}
<p v-cloak>
{{ message }}
</p>

方法二: v-text

vue中我们会将数据包在两个大括号中，然后放到HTML里，但是在vue内部，所有的双括号会被编译成textNode的一个v-text指令。

而使用v-text的好处就是永远更好的性能，更重要的是可以避免FOUC (Flash of Uncompiled Content) ，也就是上面与遇到的问题。

示例代码：

<span v-text="msg"></span>
<!-- same as -->
<span>{{msg}}</span>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

如何對vue渲染時閃爍{{}}進行處理

相關文章