區(qū)別
- 1.手段:v-if是通過控制dom節(jié)點的存在與否來控制元素的顯隱型宙;v-show是通過設置DOM元素的display樣式店量,block為顯示,none為隱藏扇单;
- 2.編譯過程:v-if切換有一個局部編譯/卸載的過程换可,切換過程中合適地銷毀和重建內(nèi)部的事件監(jiān)聽和子組件椎椰;v-show只是簡單的基于css切換;
- 3.編譯條件:v-if是惰性的沾鳄,如果初始條件為假慨飘,則什么也不做;只有在條件第一次變?yōu)檎鏁r才開始局部編譯(編譯被緩存译荞?編譯被緩存后瓤的,然后再切換的時候進行局部卸載); v-show是在任何條件下(首次條件是否為真)都被編譯,然后被緩存吞歼,而且DOM元素保留圈膏;
- 4.性能消耗:v-if有更高的切換消耗;v-show有更高的初始渲染消耗篙骡;
使用場景
基于以上區(qū)別本辐,因此桥帆,如果需要非常頻繁地切換医增,則使用 v-show 較好慎皱;如果在運行時條件很少改變,則使用 v-if 較好叶骨。
總結(jié)
v-if判斷是否加載茫多,可以減輕服務器的壓力,在需要時加載,但有更高的切換開銷;v-show調(diào)整DOM元素的CSS的dispaly屬性忽刽,可以使客戶端操作更加流暢天揖,但有更高的初始渲染開銷。如果需要非常頻繁地切換跪帝,則使用 v-show 較好今膊;如果在運行時條件很少改變,則使用 v-if 較好伞剑。