v-if和v-show的区别

v-if

v-if 的使用方法并不复杂，只需要为元素挂上v-if指令即可，与之配套的还有v-else-if和v-else，不过它们只能与v-if配合使用。

<template>
  <h2 v-if="order === 0">站在前排的v-if</h2>
  <h2 v-else-if="order === 1">不上不下的v-else-if</h2>
  <h2 v-else>负责垫后的v-else</h2>
  <button @click="toggleTitle">切换标题</button>
</template>
<script>
export default{
  data(){
    return {
      order: 0
    }
  },
  methods:{
    toggleTitle(){
      this.order = ++this.order % 3
      console.log('order的值为：',this.order)
    }
  }
}
</script>

v-show

v-show也可以用于实现条件渲染，不过它只是简单的切换元素的CSS属性：display。当条件判定为假时，元素的display属性将被赋值为none；反之，元素的display属性将被恢复为原有值。
相对于v-if来说，v-show并不能算作真正的条件渲染，因为挂载它的多个元素之间并没有条件上下文关系。

相同点：

• 都可以用来实现条件渲染

区别：

1. 手段

• v-if是往结构中添加或者删除DOM元素
• v-show通过设置DOM元素的display属性，控制元素的显示

2. 编译过程

• v-if会在切换中将组件上的事件监听器和子组件销毁和重建。当组件被销毁时，它将无法被任何方式获取，因为它已不存在于DOM中。
• v-show只是简单的css切换

3. 编译条件

• v-if是惰性的，当初始值为false时不进行编译，只有在值第一次为true的时候才开始局部编译（编译被缓存后，在切换的时候进行局部的卸载）。这在使用Vue生命周期钩子函数时要尤其注意，如果生命周期已走过组件创建的阶段，却仍无法获取组件对象，想一想是不是v-if在作怪。
• v-show不管在什么条件下，初始值是否为真，都在第一次的时候被编译，被缓存，并保存DOM元素

4. 性能消耗

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

5. 使用场景

• v-if适合运营条件不大可能改变的场景
• v-show适合频繁切换，且v-show不支持template元素。