Le problème et la solution du scintillement de {{}} lors du rendu de vue

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. Ensuite, à travers cet article, je partagerai avec vous le problème et la solution du scintillement de {{}} lors du rendu de vue. Les amis intéressés devraient jeter un œil ensemble

v-if et v-show peuvent être les suivants. le plus couramment utilisé dans le développement quotidien. Bien que les deux instructions 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 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-show Le. 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 : partielle

L'élément

est l'emplacement d'un partiel enregistré, qui 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(&#39;my-partial&#39;, &#39;<p>This is a partial! {{msg}}</p>&#39;)
<!-- 静态 partial -->
<partial name="my-partial"></partial>
<!-- 动态 partial -->
<!-- 渲染 partial，id === vm.partialId -->
<partial v-bind:name="partialId"></partial>

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

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

J'ai utilisé v-show à certains endroits lors de l'écriture de la page de la communauté APP Lors de l'actualisation de la page, j'ai constaté que même lorsque la logique était fausse. , certains éléments ne doivent pas être affichés. Un visage qui passe devant. Ce n'était pas grave si l'élément était petit, mais s'il s'agissait d'un endroit particulièrement grand, cela aurait l'air très désagréable. J'ai donc cherché en ligne pour voir s'il y avait une solution, et. il s'est avéré qu'il y en avait effectivement 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 termine la compilation.

Je suis confus rien qu'en lisant cette phrase, mais l'utilisation est immédiatement suivie :

Lorsqu'elle est utilisée avec des règles CSS telles que [v-cloak] { display: none } , cette directive peut masquer les balises Moustache non compilées jusqu'à ce que l'instance est prêt.

En d'autres termes, la directive v-cloak peut lier un ensemble de styles CSS comme un sélecteur CSS, et cet ensemble de CSS prendra effet jusqu'à ce que l'instance soit compilée.

Exemple de code :

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

Méthode 2 : v-text

vue Nous enveloppera les données entre deux accolades et les mettra en HTML, mais dans vue, toutes les doubles accolades seront compilées dans une directive v-text de textNode.

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

示例代码：

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

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

零基础学习AJAX之AJAX框架

零基础学习AJAX之制作自动校验的表单

ajax的get请求时缓存处理解决方法

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!