Vue - v-if 和 v-show 的区别

v-if 和 v-show 的区别

• v-if 和 v-show是什么？

• 控制元素或模板的渲染。而v-if和v-show也属于Vue的内部常用的指令（条件渲染）。这里所说的指令就是directive，指特殊的带有前缀v-的命令，指令的值限定为绑定表达式，指令的职责是当表达式的值改变时把某些特殊的行为应用到DOM上。

• 共同点

  动态显示Dom元素

• 不同点

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

  哪个比较好？

  使用v-if较好。
  这两个都是Vue的内部指令，而且都是用来控制元素的渲染。只不过，v-if判断是否加载，可以减轻服务器的压力，在需要时加载;v-show调整DOM元素的CSS的dispaly属性，可以使客户端操作更加流畅。虽然这两都都能很好的控制元素的渲染，但实际使用的时候，更应该根据自己的场景来判断使用哪一个指令。

  案例：

   <div id='app'>
   <div v-if="isShow">我是 v-if</div>
   <div v-show="isShow">我是 v-show</div>
   </div>
   new Vue({
   el:"#app",
   data:{
   isShow:true    
   })  
  

当isShow 为true时， v-if 结果为-> “我是 v-if” ， v-show 结果为-> “我是 v-show” 。
当isShow 为false时， v-if 和 v-show 结果 虽然都为空 。但是v-if 的状态为 注释状态 ，而v-show 只是把样式 设置为display：none 而已，元素依旧存在

v-if和v-show都能控制DOM元素的显示和隐藏，但是在切换v-if模块时，Vue有一个局部编译/卸载过程，因为v-if中的模板可能包括数据绑定或者子组件，v-if是真是的条件渲染，它会确保条件快在切换时合适的销毁与重建条件块内的时间监听器和子组件。

注意：v-show 不支持template语法，也不支持v-else语法