Les solutions pour que vue ne rafraîchisse pas la page actuelle sont : 1. Définissez un seuil dans les données, un code tel que "this.show = false;setTimeout(() => {this.show = true},0)" ; 2. Une fois les données traitées, utilisez « this.$froceUpdate() » pour forcer l'actualisation ; 3. Une fois le traitement des données terminé, effectuez l'opération de réinitialisation des données. 4. Utilisez la méthode globale « this.$set » pour mettre à jour les données ; , etc.
L'environnement d'exploitation de ce tutoriel : système Windows 10, Vue version 3, ordinateur Dell G3.
Que dois-je faire si vue n'actualise pas la page actuelle ?
La page de mise à jour des données dans le projet vue ne s'actualise pas. Cette situation peut être divisée en plusieurs types, mais la raison est que les versions inférieures à vue3.0 ne peuvent pas surveiller les modifications des objets (y compris les tableaux et les objets). Le mécanisme d'actualisation de Vue ne peut pas détecter les changements de données lorsqu'elles changent, nous devons donc atteindre l'objectif d'actualisation de la page via divers processus pendant l'application réelle.
1. Il s'agit d'une solution simple et grossière, qui consiste à réorganiser et redessiner la page une fois la mise à jour des données terminée. Cependant, la consommation de la page ne doit pas être utilisée à moins que cela ne soit absolument nécessaire. , la méthode d'implémentation spécifique est la suivante :
Définissez un seuil dans les données, tel que show, initialement vrai
Implémentation du code :
this.show = false;
setTimeout(() => {
this.show = true
},0)
Copier après la connexion
2.Une fois les données traitées, utilisez this.$froceUpdate (. ) pour forcer l'actualisation ;
3. Effectuez l'opération de réinitialisation des données une fois le traitement des données terminé, mais il convient de noter que cette méthode n'est valable que pour les objets (le tableau de test personnel n'est pas valide, si des amis peuvent l'obtenir, veuillez laisser un message, faites-moi savoir Adorez-le, hehe), et cette méthode ne convient pas aux sources de données avec des valeurs clés dans l'objet qui sont des types de référence (pour cette méthode, je pense personnellement que le modèle d'affichage des données de type référence peut être encapsulé dans un composant séparé, puis dans ce composant. Pour actualiser les données, bien sûr, la surveillance des modifications des données est essentielle. Cette méthode n'a pas été testée, donc ça devrait aller)
let temp = this.data;
this.data = null;
this.data = temp
Copier après la connexion
4. .$set méthode globale pour mettre à jour les données ; Nous voulons parler ici du mécanisme de liaison de données de vue ; lorsqu'une page est créée, le modèle html ne sera lié qu'aux données qui existent déjà dans les données lors de sa création initiale. Si nous ajoutons des données après la création de la page, il y aura des situations où les données seront mises à jour, mais la page ne sera pas actualisée This.$set (source de données, clé des données à ajouter/indexer dans les données source, nouveau. data) est la méthode officiellement fournie par Vue pour ajouter des données et permet d'actualiser la page !
5. Pour les données du tableau, les raisons courantes pour lesquelles la page ne s'actualise pas après la modification des données sont :
Modification des éléments du tableau via l'indice du tableau
-
Modification de la longueur du tableau
-
Puis lors de la modification les données du tableau, nous devons utiliser push(), pop(), shift(), unshift(), splice(), sort(), reverse() et d'autres méthodes natives pour manipuler les données, car Vue peut détecter directement le tableau les données apportées par ces méthodes changent.
6. La raison la plus fondamentale pour laquelle les données ne sont pas actualisées est parce que Vue pense que la structure du modèle n'a pas été mise à jour, elle ne générera donc pas de nouveau DOM virtuel, nous pouvons donc ajouter une valeur clé qui changera lors de l'opération. se termine pour le DOM qui doit être mis à jour, il sera donc actualisé (c'est une nouvelle compétence que j'ai apprise récemment, j'en ajouterai d'autres).
Apprentissage recommandé : "
tutoriel vidéo 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!