Offer to come, dig friends take it! I am participating in the 2022 Spring Recruit Punch card activity. Click here for details.

A very common question, what’s the difference between V-show and V-if?

Look at a wave of source code

V – show principle

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)
  }
}
Copy the code

Transition if you have transition, display if you don’t have transition. Elements are always rendered no matter what the initial conditions are.

V – if principle

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
          )
        }
      }
    })
  }
)
Copy the code

Returns a node node, and the render function uses the value of the expression to determine whether to generate the DOM

The same

Can control whether or not elements are displayed on the page

<div v-show="isShow"></div>
<div v-if="isShow"></div>
Copy the code

The difference between

  • Different means of control:v-showIt controls the CSSdisplayWhether it’s None to hide or show, the DOM element is always there. whilev-ifShow and hide directly adds or removes the entire DOM element.
  • Different compilation processes:v-showSimply switch based on CSS. whilev-ifThe switch has a partial compile/uninstall process in which the internal event listeners and subcomponents are destroyed and rebuilt.
  • Different compilation conditions:v-ifIs true conditional rendering, which ensures that event listeners and subcomponents within the conditional block are destroyed and rebuilt during the switch, and only render if the render condition is true.
  • v-showChanging from False to true does not trigger the component’s life cycle.
  • v-ifTriggers the component when it changes from false to truebeforeCreate,create,beforeMount,mountedHook that triggers the component when true changes to falsebeforeDestory,destoryedMethods.
  • v-ifHigher switching costs,v-showThere is a higher initial render cost.

Usage scenarios

  1. If frequent switching is required, thenv-showIs better.
  2. If conditions rarely change at run timev-ifIs better.