F2E 前端工程文件

Appearance

Vue 3 核心教學：掌握條件渲染的動態切換術 ​

在網頁開發中，我們經常需要根據使用者的狀態或資料的變化，來決定是否顯示特定的畫面。例如：登入後才看得到的會員專區、點擊按鈕後跳出的彈出視窗或是資料載入中的 Loading 動畫。

在 Vue 3 中，處理這種有沒有滿足條件的渲染邏輯非常簡單。Vue 提供了 v-if 系列指令與 v-show 指令。本文將帶您深入它們的底層邏輯，並學會如何在實際開發中做出正確的效能抉擇。

區塊動態開關：v-if、v-else-if、v-else 完整組合 ​

v-if 指令用於條件性地渲染一個區塊。這個區塊只會在指令的表達式回傳 true 時才動態被渲染。

基本用法：v-if ​

最簡單的邏輯，只有 符合條件才顯示，不符合就什麼都不做。

html
<p v-if="isLogin">歡迎回來，親愛的會員！</p>

雙向分支：v-if 與 v-else ​

當您需要 二選一 的邏輯時，v-else 必須緊跟在 v-if 或是 v-else-if 的元素後面，否則它將無法被 Vue 正確識別。

html
<input v-if="isLogin" type="button" value="登出系統" />
<input v-else type="button" value="立即登入" />

多重條件：v-else-if ​

如果您的判斷邏輯有多個階層，可以使用 v-else-if 來串聯。

html
<div v-if="role === 'admin'">
  <p>尊貴的【管理員】您好，這是系統後台。</p>
</div>
<div v-else-if="role === 'editor'">
  <p>親愛的【編輯】您好，您可以撰寫文章。</p>
</div>
<div v-else>
  <p>一般會員您好，歡迎瀏覽網站。</p>
</div>

樣式隱藏術：v-show 的基本應用 ​

除了 v-if，Vue 還提供了另一個看起來效果一模一樣的指令 v-show，它的用法非常相似。

html
<div v-show="isVisible">
  <p>這是一個可切換顯示狀態的彈出視窗。</p>
</div>

雖然在畫面上，當條件為 false 時，兩者都會讓該區塊消失，但它們在 DOM（網頁文件物件模型） 的底層運作機制上卻有著天壤之別！

經典面試題：v-if 與 v-show 的底層邏輯與效能大對比 ​

理解 v-if 與 v-show 的差異，是區分 Vue 初學者與資深前端工程師的重要指標。

底層運作機制的本質差異 ​

  • v-if 是真正的條件渲染：當條件為 false 時，Vue 根本不會建立該 DOM 節點；如果原本存在而條件變為 false，Vue 會直接將該節點從 HTML 中銷毀。它是動態地在 DOM 樹上新增或移除標籤。
  • v-show 是樣式控制的隱藏： 無論條件是 true 還是 false，該 HTML 標籤永遠都會被渲染並存在於 DOM 中。Vue 只是單純透過 CSS 的 display: none; 樣式來切換它的可見度。

效能對比與使用時機表 ​

特性v-ifv-show
底層機制動態新增/銷毀 DOM 節點切換 CSS display: none;
初始渲染消耗較低，若初始為 false 則完全不事生產較高，無論如何都會編譯並渲染 DOM
切換頻繁消耗較高，每次切換都要重新建立/銷毀 DOM較低，僅更改 CSS 屬性，速度極快
適用場景執行階段很少改變條件，例如：權限判斷、分頁切換需要非常頻繁切換顯示，例如：Tabs 標籤頁、側邊選單開關

開發進階技巧：使用 <template> 進行條件分組 ​

有時候，我們希望一口氣切換多個 HTML 標籤，例如：一整組標題與內文，但又不想為了加上 v-if 而在外面無故多包一層無意義的 <div> 標籤，因為這會破壞原本的 CSS 佈局，例如 Flexbox 或 Grid。

這時候，Vue 專屬的虛擬標籤 <template> 就能派上用場！

html
<template v-if="hasPromotion">
  <h2>限時大特價</h2>
  <p>全館商品滿千折百，錯過再等一年！</p>
  <button>領取優惠券</button>
</template>

重要限制

<template> 元素只能與 v-if、v-else-if、v-else 以及 v-for 搭配使用，它不支援 v-show。因為 v-show 依賴 CSS 樣式控制，而一個不會出現在 DOM 樹上的虛擬標籤是無法被賦予 CSS 樣式的。

總結：條件渲染的核心心法 ​

快速幫您統整 Vue 3 條件渲染的秘訣：

  • 權限、大區塊切換：優先選 v-if，不該看的東西連 DOM 都不要產生，既安全又節省初始載入效能。
  • 頻繁開關、轉場動畫：優先選 v-show，利用 CSS 切換速度最快，避免瀏覽器頻繁重繪（Reflow）DOM 節點。
  • 多標籤同進退：善用 <template v-if="..."> 包裹，保持網頁結構乾淨。

Copyright © 2025-Present