VueJs 学习笔记 - v-if & v-show

v-if vs v-show

相同点：v-if 和 v-show 都可以动态的操作 DOM 结构的显示与隐藏；

不同点：v-if 的显示、隐藏是操作 DOM 结构的添加和移除，v-show 的显示、隐藏是给 DOM 节点添加 display 属性 block / none；

 

编译过程：

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

v-show 只是基于 CSS 的切换；

编译条件：

v-if 是惰性的，如果初始条件为 false，则不做编译渲染，只有在第一次为 true 时才开始局部编译（编译被缓存？，切换时进行局部卸载）；

v-show 是在任何条件下都会被编译，然后被缓存，而且 DOM 元素保留；

性能消耗：

v-if 有更高的切换消耗；

v-show 有更高的初始渲染消耗；

使用场景：

v-if 适用于运营条件不大可能改变的场景；

v-show 适用于频繁切换的场景；