一、前言
在 Vue.js 中，v-if 和 v-show都是用於條件性地渲染元素的指令。簡單來說就是兩者都控制了DOM元素的顯示和隱藏。那麼問題來了，同樣的功能，為什麼要分兩個指令呢？本文將對這兩個指令進行深入剖析，為大家解開這個看似簡單，實則不難的迷霧。
二、v-if 實現原理
1. 編譯階段：
在 Vue 的模板編譯過程中，當遇到 v-if 指令時，會生成相應的程式碼邏輯來處理條件渲染。例如，對於以下模板程式碼：
<div v-if="show">Hello, Vue!</div>
編譯後可能會生成類似以下的 JavaScript 程式碼：
function render() {
if (show) {
return h('div', {}, 'Hello, Vue!');
} else {
return null;
}
}
這裏的 h 函式是 Vue 內部用於建立虛擬 DOM 的函式。可以看到，根據 show 的值來決定是否建立包含文字“Hello, Vue!”的 div 元素的虛擬 DOM。
2. 執行時階段：
當 Vue 例項初始化時，會執行渲染函式來建立初始的虛擬 DOM。對於 v-if，如果條件表示式的值為 true，則會建立相應的真實 DOM 元素並插入到父元素中；如果值為 false，則不會建立 DOM 元素。
當條件表示式的值發生變化時，Vue 會觸發重新渲染。如果新的值為 true，則會建立 DOM 元素並插入；如果新的值為 false，則會移除相應的 DOM 元素。
三、v-show 實現原理
1. 編譯階段：
與 v-if 類似，在編譯過程中，遇到 v-show 指令時也會生成相應的程式碼邏輯。對於以下模板程式碼：：
<div v-show="show">Hello, Vue!</div>
編譯後可能會生成類似以下的 JavaScript 程式碼：
function render() {
return h('div', { style: { display: show? '' : 'none' } }, 'Hello, Vue!');
}
透過設定 div 元素的 style 屬性中的 display 屬性來實現顯示和隱藏。
2. 執行時階段：
初始渲染時，根據 show 的值來設定 div 元素的 display 屬性。如果 show 為 true，則 display 屬性為預設值（通常為 block 或 inline-block 等），元素顯示；如果 show 為 false，則 display 屬性為 none，元素隱藏。
當 show 的值發生變化時，會更新元素的 display 屬性，實現顯示和隱藏的切換。
四、v-if 和 v-show 指令的效能對比
1. v-if：
當條件頻繁切換時，v-if 的效能相對較低。因為每次條件變化都涉及到完整的 DOM 元素的建立和銷燬操作。
當條件為false時，v-if 對應的元素及其子元素完全不會被渲染到 DOM 中。這意味著在初始渲染時，如果v-if 的條件一開始就是false，那麼不會有任何與該元素相關的 DOM 操作和資源消耗。
例如，如果有一個複雜的元件或包含大量數據處理的元素使用 v-if 且初始條件為false，那麼在頁面載入時可以節省大量的時間和資源。
2. v-show：
v-show 在切換效能上相對較好。因為它只是透過修改 CSS 的display屬性來實現顯示和隱藏，不涉及到 DOM 元素的建立和銷燬。
無論條件如何，元素始終會被渲染到 DOM 中，只是透過設定 CSS 的display屬性來控制其顯示或隱藏。即使v-show的條件為false，該元素也會佔用一定的 DOM 空間和可能的資源載入（如圖片、指令碼等），只是在視覺上被隱藏了。
五、總結
v-if 是透過真正的 DOM 操作來實現條件渲染，根據條件表示式的值來建立或移除 DOM 元素；而 v-show 是透過控制元素的 style 屬性中的 display 屬性來實現顯示和隱藏，無論條件如何，元素始終存在於 DOM 中，只是透過樣式控制其可見性。在選擇使用哪種指令時，需要根據具體的應用場景和效能需求來考慮。如果需要頻繁切換顯示狀態且初始渲染成本較高，可以選擇 v-show；如果條件變化不頻繁且希望在不需要時完全移除元素以節省資源，可以選擇 v-if。
