v-if 和v-show

163 阅读1分钟
  • 一.v-if能够控制是否生成虚拟节点vnode,他所控制的是元素的删除和生成,v-if为true时,会生成对应的vnode,并生成对应的dom元素,当其为false时,不会生成对应的vnode,也就不会生成对应的dom元素
  • 二.v-show始终会生成vnode,也就间接导致了会始终有dom元素,控制的是虚拟节点的显示与隐藏控制的是元素的display的值,
  • 当v-show为true时,不做任何处理,当v-show为false时,设置dom元素的display: none;
  • 使用v-if可以有效的减少树的节点和渲染量,但也会导致树的不稳定;而使用v-show可以保持树的稳定,但不能减少树的节点和渲染量。因此,在实际开发中,显示状态变化频繁的情况下应该使用v-show,以保持树的稳定;显示状态变化较少时应该使用v-if,以减少树的节点和渲染量。