(自用面试题)v-if和v-show的相同点和不同点是什么?

223 阅读1分钟

相同点

在vue中v-if(不含v-else)和v-show的作用效果是相同的,都能控制元素在页面是否显示:当表达式为true的时候,都会占据页面的位置;当表达式为false的时候,都不会占据页面位置。

不同点

  1. 控制手段:v-if显示隐藏是动态的向DOM树内添加或删除DOM元素;v-show隐藏则是为该元素添加display: none,DOM元素依旧还在。

  2. 编译过程:v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件;v-show只是简单的基于CSS切换。

  3. 编译条件:v-if是真正的条件渲染,它会确保在切换过程中条件块内的事件监听器和子组件合适地被销毁和重建:只有渲染条件为假时,并不做操作,直到为真才渲染;v-show是在任何条件下,无论首次条件是否为真,都被编译,然后被缓存,而且保留DOM元素。

  4. 性能消耗:v-if有更高的切换消耗;v-show有更高的初始渲染消耗。

  5. 使用场景:如果在运行时条件很少改变,则使用v-if较好;如果需要非常频繁地切换,则使用v-show较好。

背景:
v-if由于直接操作DOM节点增加或删除,所以相比v-show开销更大。