vue中的v-if和v-show的区别

官方文档的介绍：
Vue中文社区说明文档中简单来说是：初始渲染的时候进行条件判断展示；

在实际开发中我们会经常使用到v-if和v-show来进行判断展示，我们可以这么理解

<div class="tc" v-if="pload && list.length<1" >
   <img src="../assets/img/mall_none_order.png" />
</div>

上面的实例中，v-if的作用是通过pload和list.length是否<1来判断这个div是否展示，因为是并且关系，只有当pload和list.length<1两个成立都成立的时候这个div和里面的img才展示和生效，

反之如果判断条件不成立的时候，v-if则不会展示；

<div class="tc" v-show="pload && list.length<1"  >
   <img src="../assets/img/mall_none_order.png" />
</div>

上面的案例代码我们其实也可以换成v-show来进行判断，视觉效果也是一样的；注意: 只是视觉效果是一样的，两者之间不是等于的关系(后面来进行分析)；用v-show来判断条件pload为真并且list.length<!的时候才成立，div和div里面的img标签才生效；

上面说到v-if和v-show都能实现根据判断条件进行展示的效果，但是这不代表这两者是等于的关系；仅仅只是视觉效果相同而已，下面我们来讲讲v-if和v-show的区别及注意事项:

　　使用v-if，我们可以注意到浏览器并没有渲染到元素class为tc的div，这是由于v-if只有当判断条件为真时，浏览器才会生成标签并在浏览中渲染，反之判断条件为假时，浏览器将不会生成标签更不会渲染。

那么我们可以想想，在条件为假的时候浏览器不生成标签不渲染，条件为真的时候浏览器才渲染，这样是不是很消耗页面性能呢？

假如我们的判断条件不只有一种场景而是有多种场景呢？那么这时怎么办呢？Vue给我们提供了v-else指令，v-else是v-if的专属指令，v-else只能和v-if一起连用；

　如果我们使用v-show进行判断渲染，则div标签和里面的img是会生成并渲染的，但是我们注意到浏览器在我们的内联样式中添加了display:none属性，所以实质上v-show标签是存在的，只是浏览器帮我们隐藏了而已；实际上浏览器只是根据判断条件在更改内联样式，条件为真的时候内联样式display:block；条件为假的时候内联样式更改为display:none; v-show实际上比v-if的性能更高，因为v-show只是动态的更改样式而不需要增删DOM元素，但是遇到多种情况分支判断的时候v-show是不能和v-else连用的，碰到这种场景使用v-show的处理办法就是重新再用v-show写另外的逻辑判断；

总结：
1.手段：v-if是通过控制dom节点的存在与否来控制元素的显隐；v-show是通过设置DOM元素的display样式，block为显示，none为隐藏；
2.编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换；
3.编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载); v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；
4.性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗；

使用场景
基于以上区别，因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

使用性能
v-if判断是否加载，可以减轻服务器的压力，在需要时加载,但有更高的切换开销;v-show调整DOM元素的CSS的dispaly属性，可以使客户端操作更加流畅，但有更高的初始渲染开销。如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。