v-if和v-show都是用于控制元素是否进行视图展示

• 控制手段

  v-if根据判断条件动态进行DOM的增加和删除

  v-show根据判断条件动态进行DOM的显示和隐藏，即切换display状态

• 编译过程

  v-if切换有一个布局编译/卸载的过程，切换过程中会合适的销毁和重建内部的事件监听和子组件

  v-show切换只是简单的基于display进行切换

• 编译条件

  v-if的渲染是惰性的，初始渲染时条件为假，什么都不做，直到条件第一次变为真，才会开始渲染条件块

  v-showf的渲染是非惰性的，不管初始条件是什么，元素总会被渲染，只是基于display控制是否显示

• 组件的生命周期

  v-if初始值为false时组件不会渲染，不会触发钩子

  v-if初始值为true时触发组件的beforeCreate、created、beforeMount、mounted钩子

  v-if由false变为true时，触发组件的beforeCreate、created、beforeMount、mounted钩子

  v-if由true变为false时触发组件的beforeDestory、destoryed钩子

  v-show初始值为false/true时组件都会渲染，触发组件的beforeCreate、created、beforeMount、mounted钩子

  v-show由false变为true或由true变为false时，不会触发组件的钩子

• 开销

  v-if有更高的切换开销

  v-show有更高的初始渲染开销

• 多条件场景

  v-if可以和v-else、v-else-if配合使用，当出现多条件场景时，可以发挥作用

• 使用场景

  运行时条件很少改变，使用v-if较好

  当需要非常频繁的切换时，使用v-show较好