Vue v-show and V-if are different and used in different scenarios

V -show vs V -if

• In vue, both V-show and V-if control whether elements are realistic on the page

• V-show is the display attribute of the CSS element, so when you use v-show to hide an element, the ELEMENT’s DOM node is still in the page

• V-if show and hide is to add or remove dom elements in their entirety. V-if switching is a partial compile/uninstall process in which internal event listeners and subcomponents are destroyed and rebuilt appropriately

• V-if is true conditional rendering, which ensures that event listeners and subcomponents within the conditional block are properly destroyed and rebuilt during the switch. Only when the render condition is false, no action is done until it is true

• The component life cycle is not triggered when v-show is changed from false to true, and the component life cycle is not triggered when v-if is changed from false to true. Trigger the beforeCreate, CREATE, beforeMount, and Mounted life cycle hooks of the component. Trigger the beforeDestory and deStoryed methods of the component when the value changes from True to false

• In terms of performance consumption, V-IF has higher switching consumption; V-show has a higher initial render cost

Use scenarios of V-show and V-IF

• Both V-if and V-show control the display and hiding of DOM elements on the page

• V-if is more expensive than V-show (directly manipulating DOM node additions and deletions), and is better if you need to switch very frequently, or if conditions change very little at run time

Iii. V-show and V-IF principle analysis

• V-show true or false, the element is always rendered. If the element bound to the V-show directive has a transition layer, execute transition. If the EL does not have a transition layer, Just set 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)
  }
}

Copy the code

• V-if is retrieved when the abstract syntax tree is converted to the render function code string. If v-if is false, the vNode generated by the Render function does not contain the node to render, but an annotated VNode as a placeholder

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