VUE | v-if和v-show的区别

v-if和v-show的区别

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