v-show?和?v-if?的區(qū)別及使用場景分析

更新時間：2025年09月20日 09:20:37 作者：那一抹陽光多燦爛

v-show通過CSS控制顯示隱藏,保持DOM元素,適合頻繁切換；v-if根據條件生成/銷毀DOM,影響生命周期,適用于靜態(tài)條件,兩者在性能、渲染方式及組件狀態(tài)管理上有顯著差異,需根據具體場景選擇,本文通過實例代碼解析v-show和v-if的區(qū)別及使用,感興趣的朋友一起看看吧

v-show 和 v-if 的區(qū)別及使用場景

一、v-show 與 v-if 的共同點

兩者都能控制元素在頁面中的顯示與隱藏（不包括 v-else 情況），且用法相同：

<Model v-show="isShow" />
<Model v-if="isShow" />

當表達式為 true 時，元素都會占據頁面位置；為 false 時，都不會占據位置。

二、v-show 與 v-if 的區(qū)別

v-show 和 v-if 的區(qū)別核心區(qū)別

特性	v-if	v-show
渲染機制	條件為真時渲染元素，否則銷毀	始終渲染元素，通過 CSS 控制顯示
DOM 操作	動態(tài)添加/移除 DOM 元素	僅切換 `display: none` 樣式
初始開銷	低（條件為假時不渲染）	高（無論條件如何都渲染）
切換開銷	高（涉及組件銷毀/重建）	低（僅修改 CSS 屬性）
組件生命周期	觸發(fā) `created`/`mounted` 等鉤子函數(shù)	不觸發(fā)生命周期鉤子（始終存在）
組合使用	支持 `v-else-if` 和 `v-else`	無邏輯分支語法

控制方式不同
- v-show 通過添加 CSS display: none 隱藏元素，DOM 元素依然存在
- v-if 會直接添加或刪除整個 DOM 元素
編譯過程不同
- v-if 有局部編譯/卸載過程，會銷毀和重建內部事件監(jiān)聽及子組件
- v-show 僅進行簡單的 CSS 切換
生命周期影響
- v-show 狀態(tài)變化不會觸發(fā)組件生命周期
- v-if 從 false 變?yōu)?true 會觸發(fā) beforeCreate、created、beforeMount、mounted 鉤子；從 true 變?yōu)?false 會觸發(fā) beforeDestroy、destroyed
性能消耗
- v-if 切換開銷更大
- v-show 初始渲染開銷更大

三、實現(xiàn)原理分析

v-show 原理

無論初始條件如何，元素都會被渲染。其實現(xiàn)邏輯：

有 transition 時執(zhí)行 transition 動畫
無 transition 時直接設置 display 屬性

// Vue 3 的 v-show 指令實現(xiàn)
export const vShow: ObjectDirective<VShowElement> = {
    // 在元素掛載到 DOM 之前執(zhí)行
    beforeMount(el, { value }, { transition }) {
      // 保存元素的原始 display 值，用于后續(xù)恢復
      // 如果當前是隱藏狀態(tài)（display: none），則保存空字符串
      // 否則保存當前的 display 值
      el._vod = el.style.display === 'none' ? '' : el.style.display
      // 如果存在過渡動畫且值為真（顯示元素）
      if (transition && value) {
        // 執(zhí)行過渡動畫的進入前鉤子
        transition.beforeEnter(el)
      } else {
        // 否則直接設置元素的顯示狀態(tài)
        setDisplay(el, value)
      }
    },
    // ...其他生命周期處理（如 mounted, beforeUpdate, updated, beforeUnmount 等）
  }

v-if 原理

實現(xiàn)更為復雜，根據表達式值決定是否生成 DOM：

// Vue 3 的 v-if 指令轉換器
export const transformIf = createStructuralDirectiveTransform(
    // 匹配 v-if、v-else、v-else-if 指令的正則表達式
    /^(if|else|else-if)$/,
    // 轉換函數(shù)，處理條件指令的 AST 節(jié)點
    (node, dir, context) => {
      // 調用 processIf 函數(shù)處理條件分支邏輯
      return processIf(node, dir, context, (ifNode, branch, isRoot) => {
        // 條件分支處理邏輯
        // ifNode: 當前處理的 if 節(jié)點
        // branch: 當前分支（if/else-if/else）
        // isRoot: 是否為根節(jié)點
      })
    }
  )