v-if 和 v-show 的区别

 

一.共同点

都是动态显示DOM元素

二.区别

     1. 手段： 
v-if 是动态的向DOM树内添加或者删除DOM元素； 
v-show 是通过设置DOM元素的display样式属性控制显隐； 
    2. 编译过程： 
v-if  是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 
v-show  就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换 
   3. 编译条件： 
v-if 是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载); 
v-show 是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留； 
  4. 性能消耗： 
v-if有更高的切换消耗； 
v-show有更高的初始渲染消耗； 
 5. 使用场景： 
如果在运行时条件很少改变，则使用    v-if   较好。
如果需要非常频繁地切换，则使用    v-show    较好；