v-if 和 v-show的区别

区别1：(展示方面)

v-if

• 个人理解：满足v-if条件就生成dom元素，不满足就不生成dom元素。
• 换句话说: 就是v-if通过控制dom元素的存在与否来控制元素的显示和隐藏

v-show

• 个人理解：其实就是控制dom元素的css样式，满足v-show就显示，不满足就不显示
• 换句话说：是通过设置DOM元素的css样式，display: block为显示，display: none为隐藏；

下面用代码具体展示验证上面所说的

<template>
  <div class="wrap">
     <p v-if="isOk">v-if1: 天上有一个太阳/p>
     <p v-if="isTrue">v-if2: 天上有两个太阳2</p>
     <p v-show="isOk">v-show3: 天上有一个太阳3</p>
     <p v-show="isTrue">v-show4: 天上有两个太阳4</p>
  </div>

</template>

<script>
export default {
  name: "HelloWorld",
  data () {
   return {
     isOk: true,
     isTrue: false,

   }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
*{
  padding:0;
  margin:0;
}
html,body{
  width:100%;
  height:100%;
}
</style>

上面的代码中有两个v-if和v-show,很显然根据变量isOk可以知道1和3是符合显示条件的，2和4不符合显示条件，但是看html中的dom结构，可以看出，v-if不成立的2,根本就不存在dom节点中，而v-show中不成立的4, 是存在dom中，但是css设置为display:none

页面展示结果如下：

区别2: （渲染条件）

• v-if 是条件渲染，只有在条件第一次变为真时才开始局部编译，编译的内容被缓存，缓存后，在切换的时候进行卸载或者加载， 如果判断条件为假的时候，就什么都不做（惰性）
• v-show 是不管初始条件是什么，始终会被渲染并保留在 DOM 中。所以如果需要非常频繁地切换，使用 v-show 较好，只改变css，不操作dom

区别3: （应用场景）

官网上说：v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销

• 所以如果在运行时条件很少改变，则使用 v-if 较好。
• 如果需要非常频繁地切换，则使用 v-show 较好，只改变css。