Vue中v-if和v-show的区别？

最新推荐文章于 2024-06-11 09:38:15 发布

前端初见

最新推荐文章于 2024-06-11 09:38:15 发布

阅读量10w+

点赞数

分类专栏：前端知识前端框架知识前端面试题文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/stc_ljc/article/details/128522927

版权

前端知识同时被 3 个专栏收录

25 篇文章 4 订阅

订阅专栏

前端面试题

11 篇文章 0 订阅

订阅专栏

前端框架知识

8 篇文章 1 订阅

订阅专栏

Vue中v-if和v-show的区别？

在这里插入图片描述

官网

v-if

控制元素是否渲染，v-if是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听和子组件适当地被销毁和重建，如果在初始渲染时条件为假，那么直到条件第一次为真时，才会开始渲染条件块。

v-show

控制的是样式的display：none，v-show不管初始条件是什么，元素总会被渲染，并且只是简单地基于CSS的display属性进行切换。

案例

<body>
    <div id="app">
        <!-- v-if直接删除dom元素 -->
        <!-- v-show控制display属性显示和隐藏元素 -->
        <!-- 建议使用v-show，性能更好 -->
        <p class="ball" style="background-color: pink;" v-if="isShow"></p>
        <p class="ball" style="background-color: rgb(61, 134, 243);" v-show="isShow"></p>
        <label for="">  
          <input type="checkbox" v-model="isShow">是否显示
        </label>
    </div>
    <script src="libs/vue.global.js"></script>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    isShow: true
                }
            }
        }).mount("#app")
    </script>
</body>

区别

v-show只是在display:none和display:block之间切换。无论初始条件是什么都会被渲染出来，后面只需要切换CSS，DOM还是一直保留着。
v-if的话就得说到Vue底层的编译了。当属性初始为false时，组件就不会被渲染，直到组件为true，并且切换条件时会触发销毁/挂载组件的生命周期钩子函数
所以，v-if适用于在运行时很少改变条件，不需要频繁切换条件的场景；v-show则适用于非常需要频繁切换条件的场景。并且基于v-if的这种惰性渲染机制，可以在必要的时候去渲染组件，减少整个页面的初始渲染开销。

官方介绍:
v-if和v-show的区别官网介绍

v-if 是“真实的”按条件渲染，因为它确保了在切换时，条件区块内的事件监听器和子组件都会被销毁与重建。

v-if 也是惰性的：如果在初次渲染时条件值为 false，则不会做任何事。条件区块只有当条件首次变为 true 时才被渲染。

相比之下，v-show 简单许多，元素无论初始条件如何，始终会被渲染，只有 CSS display 属性会被切换。

总的来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要频繁切换，则使用 v-show 较好；如果在运行时绑定条件很少改变，则 v-if 会更合适。

前端初见

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue中v-if和v-show的区别？

v-if 是“真实的”按条件渲染，因为它确保了在切换时，条件区块内的事件监听器和子组件都会被销毁与重建。相比之下，v-show 简单许多，元素无论初始条件如何，始终会被渲染，只有 CSS display 属性会被切换。
复制链接

扫一扫