Quoi de mieux dans vue.js 2, utilisez v-if ou v-show?
Je travaille dans un projet avec vue 2. J'ai besoin de savoir dans quel cas les performances sont meilleures: utiliser v-if ou v-show?. J'ai une longue liste et chaque élément est La liste a un formulaire caché que j'ai besoin d'afficher et de masquer pour cliquer sur un bouton qui a chaque liste d'éléments.
tl; dr
En supposant que la question concerne strictement les performances:
- v-show : charge initiale coûteuse, basculement bon marché,
- v-if : charge initiale bon marché, basculement coûteux.
Evan Vous avez fourni une réponse plus approfondie à Forum VueJS .
v-show compile et restitue toujours tout - il ajoute simplement le style "display: none" à l'élément. Il a un coût de chargement initial plus élevé, mais le basculement est très bon marché.
Par comparaison, le v-if est vraiment conditionnel: il est paresseux, donc si sa condition initiale est fausse, il ne fera même rien. Cela peut être bon pour le temps de chargement initial. Lorsque la condition est vraie, v-if compile et restitue son contenu. Le basculement d'un bloc v-if supprime en fait tout ce qu'il contient, par exemple Les composants à l'intérieur de v-if sont réellement détruits et recréés lorsqu'ils sont basculés, donc basculer un énorme bloc de v-if peut être plus cher que v-show.
Réponse courte: utilisez v-if si la condition ne change pas si souvent. Utilisez v-show si vous souhaitez basculer la condition plus souvent.
Remarque: v-show ne supprime pas l'élément du DOM si votre condition est fausse. Ainsi, les gens peuvent le voir lorsqu'ils inspectent votre page avec par exemple Firebug.
V-show ne fait que basculer display propriété de css ("none" ou "block"). Lorsque nous utilisons v-show, le dom html sera uniquement sur la page (avec la propriété "display").
Mais où comme si utiliser v-if, il supprime le dom entier de la page ou recrée le dom entier en fonction de la condition.
Vérifiez cet exemple.
<p v-if="ok">If Check</p>
<p v-show="ok">Show Check</p> //try to set "ok" by true and false and inspect html
L'ajout de l'utilisation de 'v-if' peut avoir des conséquences inattendues, car il connecte et déconnecte les éléments du DOM au lieu de modifier l'affichage des éléments.
Par exemple, si vous l'utilisez sur un formulaire et que vous finissez par désactiver ce formulaire à l'aide de v-if , vous recevrez cet avertissement de la console du navigateur:
“Form submission canceled because the form is not connected”
Si vous utilisez 'v-show', vous ne rencontrerez pas ce problème.
V-show
Il chargera/rendra tous les éléments dans le DOM à la fois et si la valeur est false v-show = "false" alors il définira l'élément afficher à "aucun"
V-if
Il ne chargera/ne rendra pas l'élément tant que la condition n'est pas remplie et rend l'élément lorsque la condition est remplie