Comparez les instructions Vue v-show et v-if et parlez des scénarios d'utilisation

Cet article compare les commandes Vuev-show et v-if, présente la différence entre v-show et v-if et parle des scénarios d'utilisation de v-show et v-if. J'espère qu'il sera utile. à tout le monde !

1. La différence entre v-show et v-if

• En vue, v-show et v-if peuvent contrôler si les éléments sont affichés sur la page.

• L'affichage et le masquage de v-show consistent à faire fonctionner l'attribut d'affichage de l'élément CSS, donc lorsque vous utilisez v-show pour masquer l'élément, le nœud dom de l'élément est toujours dans la page et se cache ; de v-if consiste à masquer l'élément dom Ajout ou suppression complète. [Recommandations associées : Tutoriel vidéo vuejs]

• La commutation de v-if a un processus de compilation/désinstallation partielle. Pendant le processus de commutation, les écouteurs d'événements internes et les sous-composants sont correctement détruits et reconstruits ; est juste une simple opération d'attribut d'affichage CSS.

• v-if est un véritable rendu conditionnel, qui garantit que les écouteurs d'événements et les sous-composants du bloc conditionnel sont détruits et recréés de manière appropriée pendant le changement. Ce n'est que lorsque la condition de rendu est fausse qu'aucune opération n'est effectuée et elle n'est rendue que lorsqu'elle est vraie.

• v-show ne déclenchera pas le cycle de vie du composant lorsqu'il passe de faux à vrai. Lorsque v-if passe de faux à vrai, il déclenchera les hooks de cycle de vie beforeCreate, create, beforeMount et montés du composant, qui passera de true à true Lorsqu'il est faux, les méthodes beforeDestory et destroy du composant sont déclenchées.

• En termes de consommation de performances, v-if a une consommation de commutation plus élevée ; v-show a une consommation de rendu initiale plus élevée.

2. Les scénarios d'utilisation de v-show et v-if

• v-if et v-show peuvent contrôler l'affichage et le masquage des éléments dom sur la page

• v-if par rapport à v- showoverPour les plus grands (opérer directement l'ajout et la suppression de nœuds dom), si vous devez changer très fréquemment, il est préférable d'utiliser v-show. Si les conditions changent rarement pendant l'exécution, il est préférable d'utiliser v-if.

3. Analyse des principes de v-show et v-if

• v-show Peu importe qu'il soit vrai ou faux, l'élément sera toujours rendu si l'élément est lié à l'instruction v-show dans. le code source est entouré d'une couche de transition, il exécutera la transition S'il n'y a pas de transition imbriquée dans la couche externe de el, définissez directement 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 pour jugement lorsque. l'arbre de syntaxe abstraite est converti en chaîne de code. Si v -if est faux, le vnode généré par la fonction de rendu ne contiendra pas le nœud à restituer, mais un nœud vnode annoté comme espace réservé

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

(Partage vidéo d'apprentissage : tutoriel vuejs, front-end web)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!