v-if和v-show区别

v-if和v-show区别

v-if初始花销小，但频繁切换的话消耗资源，v-show初始花销大，频繁切换如轮播图的时候可以使用v-show。个人理解就是v-show一开始就花很多资源渲染到页面上，所以前期花费资源比较大，动态切换的时候就不会继续渲染一次，v-if在动态频繁切换的时候会一次又一次的渲染占用资源。

在页面中的区别

下面代码是实现一个点击按钮，用v-if和v-show切换一段文字

  <div id="app">
    {{ flag }}
    <hr>
    <input type="button" value="toggle" @click="flag=!flag">

    <h3 v-if="flag">哈哈哈</h3>
    <h6 v-show="flag">12345</h6>
    <!-- v-if 和 v-show 只有一个作用,就是根据指定的标识符,切换元素的显示和隐藏状态 -->
    <!-- v-if 是实时的创建或移除元素,从而达到元素的显示和隐藏 -->
    <!-- v-show 是通过为元素 添加或移除 display:none 来实现 隐藏 和 显示的 -->
    <!-- 如果 元素 需要经常的切换显示和隐藏的状态,此时,使用 v-show 更合适一些; -->
    <!-- 如果元素 被创建出来之后,可能不会进行状态的切换,此时,适合使用 v-if -->
  </div>
  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        flag: true
      },
      methods: {
        /* toggle() {
          this.flag = !this.flag
        } */
      }
    });
  </script>

切换前页面渲染出的代码

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Gbfok7ut-1604388845701)(2020-09-21-22-09-46.png)]

切换后的代码

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ePO1ViVQ-1604388845705)(2020-09-21-22-20-45.png)]

哈哈哈是用v-if切换的，12345是用v-show。当点击按钮切换时候，v-if是真正的切换-它每次都将哈哈哈渲染到页面或者取消。而v-show则是简单的加入了css样式display去隐藏12345这个标签。所以每次切换v-if消耗的资源大，v-show第一次渲染到页面消耗的资源大。v-show适合做比如轮播图，

• v-show官方说明：* v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display;
• 大白话就是v-show会被渲染（会像后台请求相对应的数据）但是不会被展示,在dom树中可以找到相对于的dom节点。

总结：一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。有大量数据请求时用v-if，节省页面响应时间！！