对比一下Vue指令v-show 和 v-if，聊聊使用场景

本篇文章对比一下Vue指令v-show 和 v-if，介绍一下v-show 和 v-if 的区别，并聊聊v-show 和 v-if 使用场景，希望对大家有所帮助！

一、v-show 和 v-if 的区别

在 vue 中 v-show 和 v-if 都可以控制元素是否在页面中现实。

v-show 的显示隐藏是操作元素css的 display 属性，所以使用 v-show 来隐藏元素的时候，元素的 dom 节点依旧还在页面中；v-if 的显示隐藏则是将 dom 元素整个添加或删除。

v-if 的切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show 只是简单的操作css的 display 属性。

v-if 是真正的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。只有渲染条件为假时，并不做操作，直到为真才渲染。

v-show 由 false 变为 true 的时候不会触发组件的生命周期，v-if 由 false 变为 true的时候，触发组件的 beforeCreate 、 create 、 beforeMount 、 mounted 生命周期钩子，由 true 变为 false 的时候触发组件的 beforeDestory 、destoryed 方法。

在性能消耗方面 v-if 有更高的切换消耗； v-show 有更高的初始渲染消耗。

二、v-show 和 v-if 使用场景

v-if 与 v-show 都能控制 dom 元素在页面的显示和隐藏

v-if 相比 v-show 开销更大的（直接操作 dom 节点增加与删除），如果需要非常频繁地切换，则使用 v-show 较好，如果在运行时条件很少改变，则使用 v-if 较好

三、v-show 和 v-if 原理分析

v-show 不管是 true 还是 false，元素总是会被渲染，源码中如果绑定了 v-show 指令的元素外层套了一层 transition 的话，就执行 transition ，如果 el 外层没有嵌套 transition 的话，就直接设置 el.style.display

export const vShow: ObjectDirective<VShowElement> = {
  beforeMount(el, { value }, { transition }) {
    el._vod = el.style.display === 'none' ? '' : el.style.display
    if (transition && value) {
      transition.beforeEnter(el)
    } else {
      setDisplay(el, value)
    }
  },
  mounted(el, { value }, { transition }) {
    if (transition && value) {
      transition.enter(el)
    }
  },
  updated(el, { value, oldValue }, { transition }) {
    // ...
  },
  beforeUnmount(el, { value }) {
    setDisplay(el, value)
  }
}

v-if 是在抽象语法树转成代码字符串的时候被获取来做判断的，如果 v-if 为false ，render 函数生成的 vnode 不会包含要渲染的节点，而是一个注释的 vnode 节点作为占位

export const transformIf = createStructuralDirectiveTransform(
  /^(if|else|else-if)$/,
  (node, dir, context) => {
    return processIf(node, dir, context, (ifNode, branch, isRoot) => {
      // ...
      return () => {
        if (isRoot) {
          ifNode.codegenNode = createCodegenNodeForBranch(
            branch,
            key,
            context
          ) as IfConditionalExpression
        } else {
          // attach this branch's codegen node to the v-if root.
          const parentCondition = getParentCondition(ifNode.codegenNode!)
          parentCondition.alternate = createCodegenNodeForBranch(
            branch,
            key + ifNode.branches.length - 1,
            context
          )
        }
      }
    })
  }
)