前端每日一題（10.21題目+10.20答案）

說一下 v-if 與 v-show 的區(qū)別

參考答案：

• 共同點(diǎn)：都是動(dòng)態(tài)顯示 DOM 元素

• 區(qū)別點(diǎn):

• 手段

  v-if 是動(dòng)態(tài)的向 DOM 樹內(nèi)添加或者刪除 DOM 元素

  v-show 是通過設(shè)置 DOM 元素的 display 樣式屬性控制顯隱

• 編譯過程

  v-if  切換有一個(gè)局部編譯/卸載的過程，切換過程中合適地銷毀和重建內(nèi)部的事件監(jiān)聽和子組件

  v-show 只是簡單的基于 css 切換

• 編譯條件

  v-if  是惰性的，如果初始條件為假，則什么也不做。只有在條件第一次變?yōu)檎鏁r(shí)才開始局部編譯

  v-show 是在任何條件下(首次條件是否為真)都被編譯，然后被緩存，而且 DOM 元素保留

• 性能消耗

  v-if  有更高的切換消耗

  v-show 有更高的初始渲染消耗

• 使用場景

  v-if  適合運(yùn)營條件不大可能改變

  v-show 適合頻繁切換