vue使用過程中，v-show和v-if必不可少，但是很多人在用的時候都不知道兩者到底有什麼區別，大都是按照習慣去使用，其實兩者是要分場合使用的。
v-show和v-if都是用來顯示隱藏元素，v-if還有一個v-else配合使用，兩者達到的效果都一樣，效能方面去有很大的區別。
v-show
v-show不管條件是真還是假，第一次渲染的時候都會編譯出來，也就是標籤都會新增到DOM中。之後切換的時候，通過display: none;樣式來顯示隱藏元素。可以說只是改變css的樣式，幾乎不會影響什麼效能。
複製程式碼v-if
在首次渲染的時候，如果條件為假，什麼也不操作，頁面當作沒有這些元素。當條件為真的時候，開始區域性編譯，動態的向DOM元素裡面新增元素。當條件從真變為假的時候，開始區域性編譯，解除安裝這些元素，也就是刪除。
複製程式碼效能方面
v-if絕對是更消耗效能的，因為v-if在顯示隱藏過程中有DOM的新增和刪除，v-show就簡單多了，只是操作css。
使用場景
因為v-show無論如何都會渲染，如果在一些場景下很難出現，那麼使用v-if。如果是一些固定的，條件內容都不怎麼會改變的，頻繁切換的，使用v-show會比較省效能。如果是子元件，每次切換子元件不執行生命週期，使用v-show，如果子元件需要重新執行生命週期，那麼使用v-if才能觸發。
複製程式碼歡迎關注 Coding個人筆記 公眾號