Vergleichen Sie die Vue-Anweisungen v-show und v-if und sprechen Sie über Nutzungsszenarien

Dieser Artikel vergleicht die VueBefehle v-show und v-if, stellt den Unterschied zwischen v-show und v-if vor und spricht über die Verwendungsszenarien von v-show und v-if. Ich hoffe, dass er hilfreich ist an alle!

1. Der Unterschied zwischen v-show und v-if

• In Vue können sowohl v-show als auch v-if steuern, ob Elemente auf der Seite angezeigt werden.

• Das Anzeigen und Ausblenden von V-Show dient dazu, das Anzeigeattribut des Element-CSS zu bedienen. Wenn Sie also V-Show zum Ausblenden des Elements verwenden, befindet sich der Dom-Knoten des Elements immer noch auf der Seite v-if dient dazu, das gesamte Hinzufügen oder Löschen des Dom-Elements auszublenden. [Verwandte Empfehlungen: vuejs-Video-Tutorial

• Der Wechsel von v-if erfordert einen teilweisen Kompilierungs-/Deinstallationsprozess. Während des Wechselvorgangs werden die internen Ereignis-Listener und Unterkomponenten ordnungsgemäß zerstört und neu erstellt ist nur eine einfache CSS-Anzeigeattribut.

• v-if ist ein echtes bedingtes Rendering, das sicherstellt, dass Ereignis-Listener und Unterkomponenten innerhalb des bedingten Blocks während des Wechsels zerstört und entsprechend neu erstellt werden. Nur wenn die Renderbedingung falsch ist, wird keine Operation ausgeführt und erst gerendert, wenn sie wahr ist.

• v-show löst den Lebenszyklus der Komponente nicht aus, wenn er von „false“ zu „true“ wechselt. Wenn v-if von „false“ zu „true“ wechselt, werden die Hooks „beforeCreate“, „create“, „beforeMount“ und „mounted lifecycle“ der Komponente ausgelöst ändert sich von true zu true, wenn es false ist, werden die Methoden beforeDestory und destroy der Komponente ausgelöst.

• In Bezug auf den Leistungsverbrauch hat v-if einen höheren Umschaltverbrauch; v-show hat einen höheren anfänglichen Rendering-Verbrauch.

2. Verwendungsszenarien von v-show und v-if

• v-if und v-show können das Anzeigen und Ausblenden von Dom-Elementen auf der Seite steuern

• v-if im Vergleich zu v- Show-Overhead Bei größeren Knoten (direktes Hinzufügen und Löschen von Dom-Knoten) ist es besser, v-show zu verwenden, wenn Sie sehr häufig wechseln müssen. Wenn sich die Bedingungen während der Laufzeit selten ändern, ist es besser, v-if zu verwenden

3. Analyse der Prinzipien von v-show und v-if

v-show Egal, ob es wahr oder falsch ist, das Element wird immer gerendert, wenn das Element an die V-Show-Anweisung gebunden ist Um den Quellcode ist eine Übergangsschicht gewickelt. Wenn in der äußeren Schicht von el kein verschachtelter Übergang vorhanden ist, wird 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 zur Beurteilung direkt festgelegt Der abstrakte Syntaxbaum wird in eine Codezeichenfolge umgewandelt. Wenn v -if falsch ist, enthält der von der Renderfunktion generierte Vnode nicht den zu rendernden Knoten, sondern einen annotierten Vnode-Knoten als Platzhalter

• 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
            )
          }
        }
      })
    }
  )

(Lernvideo-Sharing :

vuejs-Tutorial, Web-Frontend)

Das obige ist der detaillierte Inhalt vonVergleichen Sie die Vue-Anweisungen v-show und v-if und sprechen Sie über Nutzungsszenarien. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!