v-if vs v-show

区别

  • v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

  • v-if 是惰性的:如果在初始渲染时条件为假,则什么也不做,一直到条件第一次变为真时,才会开始渲染条件块。

  • v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,只是切换元素 CSS display 样式。

  • 一般来说,v-if 初始渲染时开销较小,因为只将满足条件的数据渲染到页面上。切换时开销较大,因为要动态删除、动态添加
    而 v-show 初始渲染时开销较大,因为将所有元素都渲染到页面上。切换开销小,因为只是改样式,设置是否显示

总结

因此,如果 非常频繁地切换,则使用 v-show 较好;如果在运行时 条件很少改变,则使用 v-if 较好。


原文出处:/show_1IXNc4TuFTE.html