面试题:v-if和v-show的区别

287 阅读1分钟

image.png

image.png v-if能控制是否生成vnode,也就间接控制了是否生成对应的dom

  • v-if为true:生成对应的vnode,并生成对应的dom元素
  • v-if为false:不会生成对应的vnode,自然不会生成对应的dom元素

v-show始终都会生成vnode,也就间接导致了始终生成对应的dom

  • v-show为true:不做任何处理
  • v-show为false:生成的display属性为none

使用v-if,可以有效的减少节点和渲染量,但是会导致dom树不稳定;而使用v-show,可以保持树的稳定,但是不能减少节点和渲染量。

因此,在实际开发中,显示状态变化频繁的情况下使用v-show,显示状态变化较少时使用v-if,减少树的节点和渲染量。