vue中的指令之v-if、v-show

v-if、v-show

首先得明白一点，不是说 v-show 就一定好，v-if 之所以被设计出来就一定有它的使用场景

区别

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

使用场景

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

总结

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

转自https://www.cnblogs.com/yangh-ai/p/14979932.html