Compare the Vue instructions v-show and v-if, and talk about usage scenarios

This article compares the Vue instructions v-show and v-if, introduces the difference between v-show and v-if, and talks about the usage scenarios of v-show and v-if. I hope Helpful for everyone!

1. The difference between v-show and v-if

• In vue, both v-show and v-if can be used Controls whether an element is displayed on the page.

• v-show's display and hiding is to operate the display attribute of the element's css, so when using v-show to hide the element, the element's dom node is still on the page; v-if Showing and hiding is to add or delete the entire dom element. [Related recommendations: vuejs video tutorial]

• v-if switching has a partial compilation/uninstallation process. During the switching process, the internal Event listening and sub-components; v-show simply operates the display attribute of css.

• v-if is true conditional rendering, which ensures that event listeners and subcomponents within the conditional block are destroyed and recreated appropriately during the switch. Only when the rendering condition is false, no operation is performed, and it is not rendered until it is true.

• v-show will not trigger the component's life cycle when it changes from false to true. When v-if changes from false to true, it will trigger the component's beforeCreate, create, beforeMount, The mounted life cycle hook triggers the beforeDestory and destroyed methods of the component when it changes from true to false.

• In terms of performance consumption, v-if has higher switching consumption; v-show has higher initial rendering consumption.

2. Usage scenarios of v-show and v-if

• Both v-if and v-show can control the placement of dom elements on the page. Showing and hiding

• v-if is more expensive than v-show (direct operation of adding and deleting dom nodes). If you need to switch very frequently, use v-show. Well, if the conditions rarely change during runtime, it is better to use v-if

3. Analysis of the principles of v-show and v-if

• Regardless of whether v-show is true or false, the element will always be rendered. In the source code, if the element bound to the v-show instruction has a transition nested in the outer layer, the transition will be executed. If there is no nested transition in the outer layer of el, , just set el.style.display

export const vShow: ObjectDirective<VShowElement> = {
  beforeMount(el, { value }, { transition }) {
    el._vod = el.style.display === &#39;none&#39; ? &#39;&#39; : 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 is obtained for judgment when the abstract syntax tree is converted into a code string. If v-if is false , the vnode generated by the render function will not contain the node to be rendered, but an annotated vnode node 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
          )
        }
      }
    })
  }
)

(Learning video sharing: vuejs tutorial, webfrontend)

The above is the detailed content of Compare the Vue instructions v-show and v-if, and talk about usage scenarios. For more information, please follow other related articles on the PHP Chinese website!