從以下7個(gè)維度談?wù)剉-show和v-if的區(qū)別和相同處
1）控制手段
使用v-show時(shí)，標(biāo)簽始終存在罚攀，只是更改了元素的display趟妥，而v-if直接將元素從dom樹中移除了庇勃。v-show操縱樣式，而v-if直接操縱dom元素倒彰。v-if是條件渲染，如果在初始渲染時(shí)條件為假莱睁，則什么也不做——直到條件第一次變?yōu)檎鏁r(shí)待讳，才會(huì)開始渲染條件塊，而v-show不管初始條件是什么仰剿，元素總是會(huì)被渲染创淡，且只是簡(jiǎn)單修改元素的css樣式——display屬性。
2）編譯過程
v-if切換有一個(gè)局部編譯/卸載的過程南吮，切換過程中合適地銷毀和重建內(nèi)部的事件監(jiān)聽和子組件琳彩；v-show只是簡(jiǎn)單的基于css切換
3）編譯條件
v-if是真正的條件渲染，它會(huì)確保在切換過程中條件塊內(nèi)的事件監(jiān)聽器和子組件適當(dāng)?shù)乇讳N毀和重建部凑。只有渲染條件為假時(shí)露乏，不作操作，直到為真才渲染
·v-show由false變成true時(shí)不會(huì)觸發(fā)組件的生命周期
·v-if由false變成true時(shí)涂邀，觸發(fā)組件的beforeCreate瘟仿、create、beforeMount必孤、mounted鉤子猾骡，由true變成false時(shí)觸發(fā)組建的beforeDestory瑞躺、destoryed方法
4）性能消耗
v-if有更高的消耗切換；v-show有更高的初始渲染消耗
5）原理分析
vue的渲染邏輯——首先把模板轉(zhuǎn)換成可執(zhí)行的js代碼（也就是render函數(shù)）兴想，然后執(zhí)行render函數(shù)處理模板轉(zhuǎn)換成html幢哨，而這個(gè)過程中v-if和v-show就會(huì)被解析喉脖。v-if就像if()else()一樣動(dòng)態(tài)的區(qū)創(chuàng)建元素慕购，注意在這個(gè)過程中如果v-if控制的是組件凑队，切換過程中條件塊內(nèi)的事件監(jiān)聽器和子組件會(huì)被適當(dāng)?shù)劁N毀和重建卖词，也就是會(huì)觸發(fā)組件和子組件的生命周期哥艇，如
?? ?// v-if在轉(zhuǎn)換成render時(shí)會(huì)被解析成字符串
?? ?if('v-if===true''){
? ? ? ? ? ?document.createElement('div')
? ? ? ? ? ?appendChild()
? ? ? ? ? ? ......
? ? ? ? }else{
? ?removeChild()
? ? .....
? ? }
v-show初始化時(shí)為false時(shí)會(huì)添加style="display=none"捻艳，為true時(shí)移除display=none旗吁，注意并不是把display變?yōu)閎lock翰灾，因?yàn)橐３衷豷tyle的原始性厂画，不管初始條件是什么凸丸，元素總是會(huì)被渲染，也就是說如果找到了v-show袱院，不管是true還是false都會(huì)失去創(chuàng)建元素屎慢，然后在css操作
? ?//v-show在轉(zhuǎn)換成render時(shí)會(huì)被解析成字符串
? ?if('v-show'){
? ? ? ?//創(chuàng)建元素
? ?letele=document.createElement('div');
? ? ? ?//控制顯隱
? ? ? ?if('v-show'===true){
? ? ? ? ? ?ele.setAttribute('diaplay','block')
? ? ? ? }else{
? ? ? ? ? ?ele.setAttribute('diaplay','none')
? ? ? ? }
}
6）應(yīng)用場(chǎng)景
·當(dāng)需要在顯示與隱藏之間進(jìn)行頻繁的切換操作時(shí)，就使用v-show
·如果在運(yùn)行時(shí)條件很少改變忽洛，就使用v-if
·v-if相比v-show開銷更大（直接操作dom節(jié)點(diǎn)的增加與刪除）
7）共同點(diǎn)
·兩者都用來控制元素的顯示與隱藏
·當(dāng)兩者都為false時(shí)腻惠，都不會(huì)占據(jù)頁面位置
·當(dāng)條件變化時(shí)都會(huì)觸發(fā)過渡效果
