Comment gérer le scintillement lors du rendu dans Vue

Cette fois, je vais vous montrer comment gérer le scintillement lors du rendu dans Vue. Quelles sont les précautions pour gérer le scintillement lors du rendu dans Vue. Voici un cas pratique, jetons un coup d'œil.

La différence entre v-if et v-show :

Lors du changement de bloc v-if, Vue.js a une compilation partielle/ processus de désinstallation, car les modèles dans v-if peuvent également inclure des liaisons de données ou des sous-composants. v-if est un véritable rendu conditionnel car il garantit que les écouteurs d'événements et les sous-composants du bloc conditionnel sont correctement détruits et reconstruits entre les commutateurs.

v-if est également paresseux : si la condition est fausse lors du rendu initial, rien n'est fait - la compilation locale ne démarre que lorsque la condition devient vraie pour la première fois (la compilation est mise en cache).

En comparaison, v-show est beaucoup plus simple : les éléments sont toujours compilés et préservés, simplement basculés en fonction du CSS.

Pour faire simple, la plus grande différence entre les deux est que v-if ne compilera que lorsque les conditions sont remplies, tandis que v-show compilera toujours indépendamment du fait que les conditions soient remplies ou non. de v-show est tout simplement simple. Changez l'attribut d'affichage du CSS.

Scénarios applicables :

Après avoir compris la différence essentielle entre les deux, cela change également quand utiliser v-if et quand utiliser v -show Ça doit être simple.

De manière générale, v-if a un coût de commutation plus élevé et v-show a un coût de rendu initial plus élevé. Par conséquent, v-show est préférable si vous devez changer fréquemment, et v-if est meilleur s'il est peu probable que les conditions changent au moment de l'exécution.

Par exemple, de nombreuses pages se comportent désormais différemment sur différents terminaux. Le plus courant est que de nombreuses pages d'application affichent une invite de téléchargement lorsqu'elles sont ouvertes sur WeChat, mais pas dans l'application, comme dans ce cas. , l'état de chaque extrémité est déterminé lors du chargement et ne changera pas, il convient donc d'utiliser v-if, afin que la partie téléchargée ne soit pas compilée lors de son ouverture dans l'APP.

Il est plus approprié d'utiliser v-show dans les endroits où les éléments de la page sont affichés/masqués selon des conditions différentes, car fondamentalement, les deux états doivent être changés fréquemment. Comme mentionné ci-dessus, v- La commutation. le coût du spectacle est inférieur à celui du v-if.

Conditions multiples

Souvent, le code nécessite plusieurs jugements conditionnels, mais il n'y a que v-if et v dans vue -else, il n'existe pas d'instruction telle que v-elseif. Bien qu'il n'existe pas d'instructions similaires, il existe néanmoins plusieurs façons de résoudre ce problème.

Méthode 1 : modèle

<p v-if="xxx"></p>
<template v-else>
<p v-if="yyy"></p>
<p v-else></p>
</template>

Méthode 2 : partiel

l'élément est un emplacement partiel enregistré, partiel est compilé par Vue une fois inséré. Les éléments eux-mêmes sont remplacés. L'élément doit spécifier l'attribut name.

Cette chose rappelle l'élément fragment natif javaScript, mais ce n'est pas la même chose. Les partiels sont divisés en statiques et dynamiques, et pour résoudre les problèmes ci-dessus, des partiels dynamiques doivent être utilisés.

Exemple :

// 注册 partial
Vue.partial('my-partial', '<p>This is a partial! {{msg}}</p>')
<!-- 静态 partial -->
<partial name="my-partial"></partial>
<!-- 动态 partial -->
<!-- 渲染 partial，id === vm.partialId -->
<partial v-bind:name="partialId"></partial>

Pour résoudre le problème des conditions multiples, nous pouvons pré-enregistrer les partiels respectifs pour chaque situation, puis lier l'attribut de nom du partiel à la condition de jugement , afin que plusieurs jugements conditionnels puissent être réalisés.

Autres :

1 La directive v-if peut être appliquée aux éléments d'emballage des modèles, mais v-show ne prend pas en charge le modèle

2. . Lorsque v-show est appliqué à un composant, des problèmes surviendront à cause de la priorité de la commande v-else La solution est de remplacer le v-else

officiel par un autre. v-show. Un exemple est le suivant :

// 错误
<custom-component v-show="condition"></custom-component>
<p v-else>这可能也是一个组件</p>
// 正确做法
<custom-component v-show="condition"></custom-component>
<p v-show="!condition">这可能也是一个组件</p>

Lorsque la page Vue est chargée, l'élément caché défini par v-show apparaît, provoquant le scintillement de la page

Rédaction de la communauté APP J'ai utilisé v-show à certains endroits de la page Lorsque j'ai actualisé la page, j'ai constaté que même lorsque la logique était jugée fausse, certains éléments affichaient toujours leur apparence. Les visages et ne devraient pas être affichés. Il a clignoté et les éléments étaient petits, ce qui est bien. Si cela semblait très inconfortable dans un endroit particulièrement grand, j'ai donc cherché en ligne s'il y avait une solution, et il s'est avéré qu'il y en avait. en effet un.

Méthode 1 : v-cloak

L'explication officielle n'est qu'une phrase : Cette instruction reste sur l'élément jusqu'à ce que l'instance associée soit compilée.

J'ai été confus rien qu'en lisant cette phrase, mais elle a été suivie de l'usage :

和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

也就是说v-cloak指令可以像CSS选择器一样绑定一套CSS样式然后这套CSS会一直生效到实例编译结束。

 示例代码：

// <p> 不会显示，直到编译结束。
[v-cloak] {
display: none;
}
<p v-cloak>
{{ message }}
</p>

 方法二: v-text

vue中我们会将数据包在两个大括号中，然后放到HTML里，但是在vue内部，所有的双括号会被编译成textNode的一个v-text指令。

 而使用v-text的好处就是永远更好的性能，更重要的是可以避免FOUC (Flash of Uncompiled Content) ，也就是上面与遇到的问题。

示例代码：

<span v-text="msg"></span>
<!-- same as -->
<span>{{msg}}</span>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

Vue.js实现可配置登录表单步骤详解

怎样传递数组参数至后台

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!