3.4.1　面試技巧與解析（一）

面試官：v-if和v-show有什么區(qū)別？

應(yīng)聘者：

（1）相同點(diǎn)：兩者都是在判斷DOM節(jié)點(diǎn)是否要顯示。

（2）不同點(diǎn)：

①實(shí)現(xiàn)方式。v-if是根據(jù)后面數(shù)據(jù)的真假值，判斷直接從DOM樹上刪除或重建元素節(jié)點(diǎn)；v-show只是修改元素的CSS樣式，也就是display的屬性值，元素始終在DOM樹上。

②編譯過(guò)程。v-if切換有一個(gè)局部編譯/卸載的過(guò)程，切換過(guò)程中合適地銷毀和重建內(nèi)部的事件監(jiān)聽和子組件；v-show只是簡(jiǎn)單地基于CSS切換。

③編譯條件。v-if是惰性的，如果初始條件為假，則什么也不做，只有在條件第一次變?yōu)檎鏁r(shí)才開始局部編譯；v-show是在任何條件下（無(wú)論首次條件是否為真）都被編譯，然后被緩存，而且DOM元素始終被保留。

④性能消耗。v-if有較高的切換消耗，不適合做頻繁的切換；而v-show有較高的初始渲染消耗，適合做頻繁的切換。