vue頁面加載閃爍問題的解決方法

v-if 和 v-show 的區別

v-if只會在滿足條件時才會編譯，而v-show不管是否滿足條件始終會編譯，v-show的顯示與隱藏只是簡單的切換CSS的display屬性。
也就是說，在使用v-if時，若值為false，那么頁面將不會有這個html標簽生成。而v-show：不論其值是false還是true，html元素都會存在，只是簡單的切換css的display屬性。

使用場景

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

另外

	1.v-if 指令可以應用於template包裝元素上，而v-show不支持template
	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頁面加載時出現{{message}}閃退

方法一：v-cloak

	v-cloak指令和css規則如[v-cloak]{display:none}一起用時，這個指令可以隱藏未編譯的Mustache標簽直到實例准備完畢。
	v-cloak 指令可以像css選擇器一樣綁定一套css樣式然后這套css會一直生效到實例編譯結束。

	eg:
		// <div> 不會顯示，直到編譯結束。
		[v-cloak]{
			display:none;
				}
		<div v-cloak>
			 {{ message }}
		</div>

方法二：v-text

vue中我們會將數據包在兩個大括號中，然后放到HTML里，但是在vue內部，所有的雙括號會被編譯成textNode的一個v-text指令。
而使用v-text的好處就是永遠更好的性能，更重要的是可以避免FOUC (Flash of Uncompiled Content) ，也就是上面與遇到的問題。

eg:
	<span v-text="message"></span>
	<!-- same as -->
	<span>{{message}}</span>