Comment gérer le scintillement {{}} lors du rendu de vue

Cette fois, je vais vous montrer comment gérer le scintillement de {{}} lors du rendu de vue, et quelles sont les précautions pour gérer le scintillement de {{}} lors du rendu de vue. Ce qui suit est un exemple pratique. cas. 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 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 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 Le. 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

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中文网其它相关文章！

推荐阅读：

怎样使用JS中EL表达式获取上下文参数

如何使用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!