初學者感受這兩用處都是差很少,都是隱藏dom元素用的。其實這是一個性能優化的差距,一個是顯示/隱藏一個是編譯於卸載。css
v-if 於v-show差距緩存
相同:均可以用來顯示指定的值性能優化
不一樣:一個用於刪除元素,一個用來隱藏元素。dom
當v-if裏面的值換成true或者false的時候,他是建立或刪除元素。而,v-show是用來隱藏元素的。性能
1.手段:v-if是動態的向DOM樹內添加或者刪除DOM元素;v-show是經過設置DOM元素的display樣式屬性控制顯隱;
2.編譯過程:v-if切換有一個局部編譯/卸載的過程,切換過程當中合適地銷燬和重建內部的事件監聽和子組件;v-show只是簡單的基於css切換;
3.編譯條件:v-if是惰性的,若是初始條件爲假,則什麼也不作;只有在條件第一次變爲真時纔開始局部編譯(編譯被緩存?編譯被緩存後,而後再切換的時候進行局部卸載); v-show是在任何條件下(首次條件是否爲真)都被編譯,而後被緩存,並且DOM元素保留;
4.性能消耗:v-if有更高的切換消耗;v-show有更高的初始渲染消耗;
5.使用場景:v-if適合運營條件不大可能改變;v-show適合頻繁切換。