文章の目录

• 1、示例
• • 1.1、v-show
  • 1.2、v-if
• 2、共同点
• 3、区别
• • 3.1、实现本质方法区别
  • 3.2、编译的区别
  • 3.3、编译的条件区别
  • 3.4、性能区别
  • 3.5、使用场景的区别
  • 3.6、其他方面
• 写在最后

---

v-if 和 v-show 的区别是前端面试中常问的基础知识点，v-if、v-show顾名思义就是用来判断视图层展示效果的。那么具体是怎么展示呢？v-if 和 v-show 的区别又是什么呢？

首先我们可以来看一下 Vue 中文社区说明文档的介绍：

1、示例

1.1、v-show

<template>
  <div style="border: 1px solid red">
    <h1 v-show="isVisible">显示文字</h1></h1>
    <button @click="updateData">切换</button>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        isVisible: true
      }
    },
    beforeCreate () {
      console.log("beforeCreate")
    },
    created () {
      console.log("created")
    },
    beforeMount () {
      console.log("beforeMount")
    },
    mounted () {
      console.log('mounted')
    },
    beforeUpdate () {
      console.log('beforeUpdate')
    },
    updated () {
      console.log('updated')
    },
    activated () {
      console.log('activated')
    },
    deactivated () {
      console.log('deactivated')
    },
    beforeDestroy () {
      console.log('beforeDestroy')
    },
    destroyed () {
      console.log('destroyed')
    },
    errorCaptured () {
      console.log('errorCaptured')
    },
    methods: {
      updateData () {
        this.isVisible = !this.isVisible
      }
    }
  }
</script>

<style scoped>
</style>

isVisible 为 true 时的显示效果如下：

isVisible 为 false 时的显示效果如下：


v-show 只是简单的控制元素的 display 属性。

1.2、v-if

<template>
  <div style="border: 1px solid red">
    <h1 v-if="isVisible">显示文字</h1>
    <button @click="updateData">切换</button>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        isVisible: true
      }
    },
    beforeCreate () {
      console.log("beforeCreate")
    },
    created () {
      console.log("created")
    },
    beforeMount () {
      console.log("beforeMount")
    },
    mounted () {
      console.log('mounted')
    },
    beforeUpdate () {
      console.log('beforeUpdate')
    },
    updated () {
      console.log('updated')
    },
    activated () {
      console.log('activated')
    },
    deactivated () {
      console.log('deactivated')
    },
    beforeDestroy () {
      console.log('beforeDestroy')
    },
    destroyed () {
      console.log('destroyed')
    },
    errorCaptured () {
      console.log('errorCaptured')
    },
    methods: {
      updateData () {
        this.isVisible = !this.isVisible
      }
    }
  }
</script>

<style scoped>
</style>

isVisible 为 true 时的显示效果如下：

isVisible 为 false 时的显示效果如下：

v-if 才是条件渲染（条件为真，元素将会被渲染，条件为假，元素会被销毁）

2、共同点

v-if 和 v-show 都可以动态地显示DOM元素

3、区别

3.1、实现本质方法区别

v-show 本质就是将标签样式的 display 属性设置为 none，控制隐藏；

v-if 是动态的向 DOM 树内添加或者删除 DOM 元素；

3.2、编译的区别

v-show 其实就是在控制 css；

v-if 切换有一个局部编译/卸载的过程，切换过程中适时地销毁和重建内部的事件监听和子组件；

3.3、编译的条件区别

v-show 都会编译，初始值为 false，只是将样式属性 display 设为 none，但它也编译了；

v-if 初始值为 false，就不会编译；

3.4、性能区别

v-show 只编译一次，后面其实就是控制 css，而 v-if 不停的销毁和创建，故 v-show 性能更好一点。换句话说：

• v-if 有更高的切换消耗；
• v-show 有更高的初始渲染消耗；

3.5、使用场景的区别

v-if 适合运营条件不大可能改变；

v-show 适合频繁切换；

3.6、其他方面

• v-if 有配套的 v-else-if 和 v-else，而 v-show 没有；
• v-if 可以搭配 template 使用，而 v-show 不行；

写在最后

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！