【前端知识之Vue】v-show和v-if的区别

饭啊饭°

已于 2022-07-20 22:07:44 修改

阅读量135

点赞数

分类专栏：前端知识之Vue 文章标签：前端面试 javascript

于 2022-06-15 14:32:33 首次发布

本文链接：https://blog.csdn.net/weixin_44337386/article/details/125293371

版权

前端知识之Vue 专栏收录该内容

19 篇文章 6 订阅

订阅专栏

前言

本系列主要整理前端面试中需要掌握的知识点。本节介绍v-show和v-if的区别。

文章目录

前言
一、v-show和v-if的共同点
二、v-show和v-if的区别
三、v-show与v-if原理分析
四、v-show与v-if的使用场景

一、v-show和v-if的共同点

都是vue中控制元素是否页面中显示的；
用法上也是相同的。

<body>
    <div id="app">
        <div id="one" v-show="isShow1()"></div>
        <div id="two" v-if="isShow2()"></div>
    </div>
    <script>
        new Vue({
            el:'#app',
            methods: {
                isShow1(){
                    return true
                },
                isShow2(){
                    return true
                }
            },
        })
    </script>
</body>

二、v-show和v-if的区别

控制手段：v-show隐藏则是为该元素添加display:none，dom元素依然存在。v-if显示隐藏是将dom元素整个添加或者删除。
编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换。
编译条件：
- v-if是真正的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。只有渲染条件为假时，并不做操作，直到为真才渲染；
- v-show 由false变为true的时候不会触发组件的生命周期；
- v-if由false变为true的时候，触发组件的beforeCreate、create、beforeMount、mounted钩子，由true变为false的时候触发组件的beforeDestory、destoryed方法；
性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗