前言

在面试时，面试官好像很喜欢问v-if和v-show有什么区别，那我们应该回答什么咧，以下来说说我自己的答案～

v-if

• 切换隐藏或显示时直接控制dom元素节点的增加和删除
• 切换隐藏或显示时会改变生命周期
• 有更高的切换开销
• 具有惰性，如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）

<template>
  <div class="container">
    <button @click="handleClick">显示/隐藏</button>
    <div v-if="show">内容</div>
  </div>
</template>

<script>

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

v-show

• 切换隐藏或显示时通过display：none来实现，dom元素依然存在页面上
• 切换隐藏或显示时不会触发生命周期
• 有更高的初始渲染开销
• 元素始终被编译并保留，只是简单地基于 CSS 切换。

<template>
  <div class="container">
    <button @click="handleClick">显示/隐藏</button>
    <div v-show="show">内容</div>
  </div>
</template>

<script>

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

总结

• 两者都可以控制dom元素在页面显示和隐藏
• 如果频繁的切换，则使用v-show
• 如果切换的比较少，则用v-if