Comment gérer le scintillement {{}} de la page de rendu de vue

Cette fois, je vais vous montrer comment gérer le scintillement {{}} de la page de rendu de vue. Quelles sont les précautions à prendre pour gérer le scintillement {{}} de la page de rendu de vue ? , jetons un coup d'oeil.

v-if et v-show sont peut-être les deux instructions les plus couramment utilisées dans le développement quotidien. Bien qu'elles semblent avoir des fonctions similaires, il existe encore de grandes différences entre elles.

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 les v-ifs 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 des invites de téléchargement lorsqu'elles sont ouvertes sur WeChat, mais pas dans l'application, comme ceci. 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-show The. le coût de changement de show est inférieur à celui de v-if.

Conditions multiples

Souvent, le code nécessite un jugement multi-conditions, mais il n'y a que v-if et v-else en vue, pas de directive 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 de 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 en raison de la priorité de l'instruction v-else La solution est de remplacer v-else par un autre v-show

L'exemple officiel 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

À certains endroits, lors de la rédaction de la page de la communauté APP, j'ai utilisé v-show, et lorsque j'ai actualisé la page, j'ai constaté que même lorsque la logique était jugée fausse, certains éléments montraient toujours leur visage alors qu'ils ne devraient pas être affichés. Cela est passé en un éclair. Ce n'est pas grave si les éléments sont petits, mais s'ils sont particulièrement grands, cela m'a semblé très désagréable, alors j'ai cherché sur Internet s'il y avait une solution, et il s'est avéré qu'il y en avait effectivement une.

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 termine la compilation.

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双向数据绑定实例详解

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!