v-if与v-show的区别

时间:2025-04-07 14:48:29

区别:

1、“v-if”是根据判断条件来动态的进行增删DOM元素,“v-show”是根据判断条件来动态的进行显示和隐藏元素;

2、“v-if”的切换消耗高,“v-show”的初始渲染消耗高;

3、“v-show”的性能比“v-if”高等等。

 

一、共同点:


v-if 和 v-show 都能实现元素的显示隐藏

二、区别:

  1.     v-show 只是简单的控制元素的 display 属性,而 v-if 才是条件渲染(条件为真,元素将会被渲染,条件 为假,元素会被销毁);
  2.     v-show 有更高的首次渲染开销,而 v-if 的首次渲染开销要小的多;
  3.     v-if 有更高的切换开销,v-show 切换开销小;
  4.     v-if 有配套的 v-else-if 和 v-else,而 v-show 没有
  5.     v-if 可以搭配 template 使用,而 v-show 不行

三、v-show与v-if的使用场景

  • v-if 与 v-show 都能控制dom元素在页面的显示
  • v-if 相比 v-show 开销更大的(直接操作dom节点增加与删除)
  • 如果需要非常频繁地切换,则使用 v-show 较好
  • 如果在运行时条件很少改变,则使用 v-if 较好