1、v-show和v-if的共同點(diǎn)
在vue中，v-if和v-show的作用效果是相同的（不含v-else），都能控制元素在頁(yè)面是否顯示，在用法上也相同。

當(dāng)表達(dá)式為true的時(shí)候，都會(huì)占據(jù)頁(yè)面的位置
當(dāng)表達(dá)式為false的時(shí)候，都不會(huì)占據(jù)頁(yè)面位置

2、v-show和v-if的區(qū)別
控制手段不同
編譯過(guò)程不同
編譯條件不同

控制手段：v-show隱藏則是為該元素添加css–display：none，dom元素依舊還在，v-if顯示隱藏是將dom元素整個(gè)添加或刪除
編譯過(guò)程：v-if切換有一個(gè)局部編譯/卸載的過(guò)程，切換過(guò)程中合適的銷(xiāo)毀和重建內(nèi)部的事件監(jiān)聽(tīng)和子組件；v-show只是簡(jiǎn)單的基于css切換
編譯條件：v-if是真正的條件渲染，它會(huì)確保在切換過(guò)程中條件塊內(nèi)的事件監(jiān)聽(tīng)器和子組件適當(dāng)?shù)乇讳N(xiāo)毀和重建。當(dāng)渲染條件為假時(shí)，并不做操作，直到真時(shí)才渲染。
v-show由false變?yōu)閠rue時(shí)，不會(huì)觸發(fā)組件的生命周期。
v-if由false變?yōu)閠rue時(shí)，觸發(fā)組件的beforeCreate、create、beforeMount、mounted鉤子，由true變?yōu)閒alse的時(shí)候，觸發(fā)組件的beforeDestory、destoryed方法
性能消耗：v-if有更高的切換消耗、v-show有更高的初始渲染消耗

3、v-show和v-if的原理分析
流程：
將模板template轉(zhuǎn)化為ast結(jié)構(gòu)的JS對(duì)象
用ast得到的JS對(duì)象拼裝render和staticRenderFns函數(shù)
render和staticRenderFnc函數(shù)被調(diào)用后生成虛擬VNODE節(jié)點(diǎn)，該節(jié)點(diǎn)包含創(chuàng)建DOM節(jié)點(diǎn)的所需信息
vm.patch函數(shù)通過(guò)虛擬DOM算法利用VNODE節(jié)點(diǎn)創(chuàng)建真實(shí)的節(jié)點(diǎn)

v-show原理
不管初始條件是什么，元素總是被渲染
vue中通過(guò)：有transition就執(zhí)行transition，沒(méi)有就直接設(shè)置display屬性

v-if渲染
v-if在實(shí)現(xiàn)上比v-show要復(fù)雜的多，因?yàn)檫€有else，else if等條件需要處理
這里展示返回一個(gè)node節(jié)點(diǎn)，render函數(shù)通過(guò)表達(dá)式的值來(lái)決定是否生成DOM

4、v-show與v-if的使用場(chǎng)景
v-if和v-show都能控制dom元素在頁(yè)面的顯示
v-if相比較于v-show開(kāi)銷(xiāo)更大（直接操作dom節(jié)點(diǎn)的增加與刪除）
如果需要非常頻繁地切換，則使用v-show比較好
如果在運(yùn)行時(shí)條件很少改變，則使用v-if較好