v-if和v-show的区别

何必辨认我
666 阅读2分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第8天，点击查看活动详情。

1.v-if的用法

我们在vue模板中创建一个div里面存放一些内容，在创建一个控制div的按钮绑定一个点击事件，用来控制前面创建的div，代码如下：

<template>
  <div class="home">
    <button @click="showClick">挂载/卸载</button>
    <div v-if="show">我是v-if的内容</div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      show: true  
    }
  },
  methods: {
    showClick() {
      this.show = !this.show
      console.log('当前show=>', this.show)
    }
  }
}
</script>

image.png 这里我们可以看到内容正常显示，当我们点击按钮的时候如下图：

image.png

这时我们会发现存放内容的div消失了，从中我们可以得出的结论是v-if是会创建一个新的dom，卸载dom。

2.v-show的用法

我们在模板中创建一个div里面存放一些内容，按钮里面绑定一个点击事件，用来控制前面创建的div，代码如下：

<template>
  <div class="home">
    <button @click="showClick">显/隐</button>
    <div v-show="show">我是显隐的内容</div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      show: true  
    }
  },
  methods: {
    showClick() {
      this.show = !this.show
    }
  }
}
</script>

image.png

这里我们会觉得v-if和v-show没什么区别；当我们点击按钮的时候，v-show控制的show变成了fasle

image.png

我们可以发现v-show控制的内容并没有消失，而且隐藏起来了，只是在css上进行了隐藏，而不是删除dom，在重新创建新的dom。

这是打印一个div里面的所有属性，可见创建一个div出来的消耗。 image.png

3.v-if和v-show的区别

v-if和v-show的区别分为三点

  1. 控制手段不同
    从上面v-if和v-show的用法中，我们不难看出，v-if和v-show的区别。
  • v-if为true的时候，创建dom；为false的时候，卸载dom，创建卸载循环往复，消耗极大的性能。
  • v-show为true的时候第一次创建dom且只创建一次dom，为false的时候在css上隐藏dom，及之后循环都是在css上显隐dom。
  1. 编译过程不同
  • 编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换
  1. 编译条件不同
  • 编译条件：v-if是真正的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。只有渲染条件为假时，并不做操作，直到为真才渲染

4.v-if和v-show的应用场景

  • v-if :适用于切换频率较低的场景, 特点:不展示DOM元素直接被移除注意：v-if可以和v-else-if,v-else一起使用，但要求结构不能被打断。

  • v-show: 适用于切换频率较高的场景 特点：不展示的DOM元素未备移除，仅仅是使用样式隐藏掉。

avatar
文章
阅读
粉丝