La solution parfaite au scintillement lors du rendu dans Vue

Cette fois, je vous apporte la solution parfaite au scintillement lors du rendu de vue. Quelles sont les précautions lors du traitement du scintillement lors du rendu de vue. Voici un cas pratique, jetons un coup d'œil.

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 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 ceci 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 The. le coût de changement de show est inférieur à celui de 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

Écrire dans 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 s'affichaient toujours. leurs visages et ne devaient pas être affichés. C'était bien que les éléments soient petits. 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 ça s'est retourné. qu'il y en avait bien un.

Méthode 1 : v-cloak

官方的解释就一句话：这个指令保持在元素上直到关联实例结束编译。

 光看这句话一头雾水，后面紧接着说了用法：

和 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!