vueJs 中 v-if和v-show的比较

1. 实现方法的不同

v-if 是直接销毁或者重建dom

v-show 修改css样式，dom元素始终存在,修改的是display的值

 

 

2. 编译过程

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

 

v-show 只是简单的display的值得改变，并不该变其他

 

 

3. 编译条件

v-if是惰性的，只有值为真是，才开始局部编译

v-show无论值是否为真，都将编译，并被缓存。dom节点始终存在

 

 

4. 性能消耗

v-if 在做频繁的切换时，性能消耗大，适合只做初始判断的

 

v-show 初始渲染消耗高，但是后期的切换，消耗小，适合做切换按钮一类