Vue基础教程（43）内置指令之v-show：Vue的“美颜相机”：v-show指令，藏东西的魔法我玩明白了！

原创于 2025-09-28 07:59:45 发布 · 246 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #数码相机 #前端

Vue基础教程专栏收录该内容

219 篇文章

订阅专栏

嘿，伙计们！今天咱们不聊复杂的Vuex、不扯深奥的源码，就来盘盘Vue那个看起来最简单、最人畜无害的内置指令——v-show。

你是不是曾经以为，让一个元素消失，不就是加个v-if="false"或者style="display: none"的事儿吗？没错，它们都能达到“看不见”的效果。但就像猫粮有平价和豪华之分，v-show和v-if这俩兄弟在“隐藏”这门手艺上，走的可是完全不同的路子，里面的门道深着呢！

打个比方，让你瞬间理解：

v-if 是“拆迁队”：条件不符？直接把这个元素从DOM结构里连根拔起，拆得干干净净！等需要的时候，再重新施工盖起来。
v-show 是“超级房东”：它才懒得拆房子呢。它只是给元素这个“房间”拉上了电闸（控制CSS的display属性）。房间里家具（元素本身）都在，只是灯一关，你看不见了。需要的时候，“啪”一下开灯，瞬间恢复原样！

看出差别了吗？一个关乎“存在”，一个只在乎“表现”。今天的主角，就是这位“超级房东”——v-show。

一、v-show的底裤：扒开它的工作原理

说那么多，v-show到底是怎么工作的？简单到令人发指。

核心就一句话：它通过动态地切换目标元素的CSS属性 display 的值，来实现显示和隐藏。

当你写 <div v-show="isVisible">你好呀！</div> 时，Vue在背后干了这么几件事：

监听判断：它死死地盯着你的数据isVisible的值，是true还是false。
暗中操作：

- 如果isVisible为true，Vue啥也不干，或者更准确地说，它会确保元素的display属性是其默认值（比如block, inline等），让元素正常显示。
- 如果isVisible为false，Vue会以迅雷不及掩耳之势，给这个元素的内联样式（inline style）加上 display: none !important;。注意这个!important，它是为了确保这个隐藏的优先级最高，压过你其他可能设置的CSS样式，保证“隐藏”效果绝对生效。

DOM纹丝不动：在整个过程中，这个<div>元素始终安安静静地待在它原本在DOM树中的位置上，从来没有离开过。它的生命周期（如mounted, updated）也不会因为显示隐藏而重新触发。

所以，v-show的隐藏，是一种“视觉欺骗”，骗过了你的眼睛，但没骗过浏览器的DOM树。

二、v-show vs v-if：一场关乎“性能”与“场景”的世纪掰头

理解了原理，这场经典对决就好理解了。咱们不从概念说，直接从场景出发。

什么时候该抱紧v-show的大腿？

频繁切换的场景：这是v-show的绝对主场！比如：Tab页签切换、折叠面板（Accordion）、鼠标悬停显示详情、可展开的搜索框等。这些场景下，元素的显示隐藏非常频繁。如果用v-if，每次切换都要上演一遍“拆除->重建”的拆迁大戏，会引发组件的生命周期重建、DOM渲染重排，非常消耗性能。而v-show只是开关灯，成本极低，流畅到飞起！
初始渲染成本高的组件：假如有一个组件，里面包含了复杂的计算、或者需要从后端拉取大量数据才能渲染好。如果这个组件也需要频繁切换，那一定要用v-show。因为用v-if的话，每次显示都相当于重新初始化一次，那些复杂的计算和数据请求又要来一遍，用户电脑风扇可能都得转起来。而v-show只在第一次渲染时成本高，之后切换就是瞬间的事。

那什么时候该请v-if出山？

初始根本不需要的条件：如果某个元素或组件在绝大多数情况下根本不需要显示，比如管理员才看到的按钮，普通用户99.9%的时间看不到它。那用v-if就非常合适。直接不渲染，可以减少初始DOM节点的数量，加快页面首次加载速度，减轻浏览器压力。
需要真正“销毁”组件时：有时候我们就是希望组件在条件不符时被彻底销毁，比如在表单向导中，跳到第二步时，第一步的组件状态应该被重置。这时候用v-if就非常合适，因为它每次都是全新的实例。

简单总结一下：

v-show：重在“切换性能”。开销主要在初始渲染，之后切换几乎免费。
v-if：重在“初始负载”和“条件性渲染”。每次切换都有开销（重建/销毁）。

小贴士：在Vue的<template>标签上不能使用v-show，因为它不会渲染成一个真正的DOM元素，没法给它加display样式。但可以用v-if。

三、实战演练：打造一个丝滑的Tab切换 & 权限按钮

光说不练假把式，我们来搞个完整的例子，把v-show的威力展示出来。

场景：一个产品介绍页面，有“概述”、“参数”、“评价”三个Tab。同时，页面上有一个“编辑”按钮，但只有登录的用户才可以看到。

思路：频繁切换的Tab用v-show，保证切换如德芙般丝滑。条件性显示的编辑按钮用v-if，因为不需要频繁切换，且可以减少不必要的DOM渲染。

完整代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-show实战：丝滑Tab切换</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        /* 基础样式 */
        body { font-family: sans-serif; }
        .tab-container { width: 80%; margin: 20px auto; }
        .tab-buttons { display: flex; border-bottom: 1px solid #ccc; }
        .tab-button {
            padding: 10px 20px;
            cursor: pointer;
            border: none;
            background: #f5f5f5;
            margin-right: 5px;
            border-radius: 5px 5px 0 0;
        }
        .tab-button.active {
            background: #42b983;
            color: white;
            font-weight: bold;
        }
        .tab-content { padding: 20px; border: 1px solid #ccc; border-top: none; }
        .tab-panel { display: none; } /* 默认全部隐藏，由v-show控制 */
        .edit-button { margin-top: 20px; padding: 10px; background: #f56c6c; color: white; border: none; border-radius: 4px; cursor: pointer; }
    </style>
</head>
<body>
    <div id="app">
        <div class="tab-container">
            <!-- Tab 按钮 -->
            <div class="tab-buttons">
                <button
                    v-for="(tab, index) in tabs"
                    :key="index"
                    class="tab-button"
                    :class="{ active: activeTab === index }"
                    @click="activeTab = index"
                >
                    {{ tab.name }}
                </button>
            </div>

            <!-- Tab 内容区 - 使用v-show，频繁切换的性能担当！ -->
            <div class="tab-content">
                <div v-for="(tab, index) in tabs" :key="index" v-show="activeTab === index" class="tab-panel">
                    <h3>{{ tab.title }}</h3>
                    <p>{{ tab.content }}</p>
                </div>
            </div>
        </div>

        <!-- 权限按钮 - 使用v-if，条件性渲染，不满足条件根本不渲染 -->
        <button v-if="user.isLoggedIn" class="edit-button" @click="editProduct">编辑产品信息</button>
        <p v-else>请<a href="#" @click="login">登录</a>后编辑。</p>
    </div>

    <script>
        const { createApp, ref } = Vue;
        createApp({
            setup() {
                // 响应式数据：当前激活的Tab索引
                const activeTab = ref(0);

                // Tab数据
                const tabs = ref([
                    { name: '概述', title: '产品概述', content: '这里是产品的详细介绍...（内容很长）' },
                    { name: '参数', title: '技术参数', content: '这里是详细的技术参数表格...（内容很复杂）' },
                    { name: '评价', title: '用户评价', content: '这里是用户们的真实评价...（内容动态加载）' }
                ]);

                // 用户信息
                const user = ref({
                    isLoggedIn: false // 默认未登录
                });

                // 方法
                const editProduct = () => {
                    alert('跳转到编辑页面！');
                };

                const login = () => {
                    user.value.isLoggedIn = true;
                    alert('登录成功！');
                };

                // 返回数据和方法，供模板使用
                return {
                    activeTab,
                    tabs,
                    user,
                    editProduct,
                    login
                };
            }
        }).mount('#app');
    </script>
</body>
</html>

代码解读：

Tab切换（v-show的舞台）：

- 我们用一个activeTab变量来记录当前激活的Tab索引。
- 通过v-for渲染出三个内容面板。
- 关键来了：每个面板都用v-show="activeTab === index"来控制显示。当你点击按钮切换时，activeTab的值瞬间改变，Vue会立刻计算每个面板的v-show条件，然后切换对应面板的display属性。整个过程没有组件的销毁和创建，只有CSS样式的变化，所以极其流畅。

权限按钮（v-if的战场）：

- 根据user.isLoggedIn的值来决定是否渲染“编辑”按钮。
- 对于未登录用户，这个按钮的DOM根本不存在，更干净。登录后，Vue会创建它。这种一次性的条件判断，用v-if更合适。

四、总结与避坑指南

好了，现在你已经是v-show的半个专家了。最后再送你几句心法口诀：

频繁切换用show，条件渲染多用if。记牢这句话，能解决90%的选择难题。
v-show不是万能的：它不能和<template>元素一起使用。另外，如果元素本身的显示逻辑非常复杂，需要依赖多个条件组合，有时候用v-if/v-else-if/v-else链在逻辑上会更清晰。
注意CSS冲突：由于v-show通过内联样式!important来设置display，所以如果你的CSS中也用了!important去定义元素的display属性，可能会产生意想不到的冲突，需要留意优先级。

所以，别再小看v-show这个“开关师傅”了。在追求极致用户体验的今天，这种对性能的细微拿捏，正是普通开发者和高手之间的差距所在。现在，就去你的项目里看看，哪些地方可以换上v-show，让页面体验更丝滑吧！