Vue2 中 v-if 与 v-show 深度对比及实战指南

专注前端30年2025-10-30 21:48

文章目录

- 一、核心差异解析
- 二、实战场景示例
- - [2.1 基础用法对比](#2.1 基础用法对比)
  - [2.2 性能影响示例](#2.2 性能影响示例)
  - [2.3 条件链用法](#2.3 条件链用法)
- 三、避坑与最佳实践

一、核心差异解析

对比维度	v-if	v-show
控制原理	动态创建 / 销毁 DOM 元素	修改 display 样式（隐藏为 none）
模板支持	可用于`<template>`分组元素	不支持`<template>`标签
初始渲染	惰性加载（假时不渲染）	必渲染 DOM（仅隐藏）
切换成本	高（重建组件 / 解绑事件）	低（仅改样式）
内存占用	隐藏时释放内存	始终占用内存
v-else 配合	支持链式 v-else-if/v-else	仅 Vue1.x 支持，Vue2 不兼容

二、实战场景示例

2.1 基础用法对比

javascript 复制代码

    <!-- v-if 支持多元素分组 -->

    <template v-if="hasPermission">

         <button>编辑    </button>

         <button>删除    </button>

    </template>

    <div v-else>无操作权限    </div>

    <!-- v-show 单元素控制 -->

    <div v-show="isVisible">始终存在于DOM中    </div>

2.2 性能影响示例

javascript 复制代码

    <template>

         <!-- 首屏优化：v-if减少DOM节点 -->

         <AdvancedChart v-if="showChart" />    

         <!-- 错误：v-show导致首屏DOM超3000个 -->

         <!--     <AdvancedChart v-show="showChart" /> -->

    </template>

    <script>

// 查看DOM节点数（控制台调试）

console.log(    $    $("    *").length); // 监控v-show造成的节点冗余

    </script>

2.3 条件链用法

javascript 复制代码

    <!-- v-if 条件链（Vue2推荐） -->

    <div v-if="type === 'A'">类型A    </div>

    <div v-else-if="type === 'B'">类型B    </div>

    <div v-else>其他类型    </div>

    <!-- v-show 无原生条件链 -->

    <div v-show="type === 'A'">类型A    </div>

    <div v-show="type === 'B'">类型B    </div>

三、避坑与最佳实践

高频切换选 v-show：标签页、开关等交互场景，利用低切换成本提升流畅性。
首屏 / 低频场景选 v-if：弹窗、权限控件等，减少初始 DOM 节点和内存占用。
避免 v-if 与 v-for 混用：先通过 computed 过滤数据，再用 v-for 渲染。

javascript 复制代码

computed: {

     filteredList() {

       return this.list.filter(item => item.visible);

     }

}