Explication détaillée de la mise à jour du tableau VUE
Concernant la mise à jour du tableau vue, cet article présente principalement le problème de la mise à jour du tableau VUE. L'article présente comment vue surveille les changements de données. J'espère que cela pourra aider tout le monde.
1. Classification des méthodes de données :
(1) Changement de tableau d'origine
push
pop
unshift
shift
reverse
sort
splice
(2) Le tableau d'origine reste inchangé et un nouveau tableau est généré
slice
concat
filter
Pour les méthodes qui modifient le tableau d'origine, vous pouvez directement mettre à jour la vue.
Pour les méthodes où le tableau d'origine reste inchangé, vous pouvez remplacer le tableau d'origine par un nouveau tableau pour modifier la vue.
Exemple de code :
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>vue示例</title>
</head>
<body>
<p id="app">
<ul>
<template v-for="book in books">
<li>书名：{{book.name}}</li>
<li>作者：{{book.author}}</li>
</template>
</ul>
</p>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
books: [{
name: 'vuejs',
author: 'a'
},
{
name: 'js高级',
author: 'b'
},
{
name: 'java',
author: 'c'
}
]
}
});
//直接可以使得视图改变
//app.books.push({name: 'c++',author: 'd'});
//需要更新原数组
app.books = app.books.concat([{name: 'c++',author: 'd'}]);
</script>
</body>
</html>Remarque : ce qui suit ne déclenchera pas de mise à jour de la vue.
(1) Définir les éléments directement par index.
(2) Modifiez la longueur du tableau, app.books.length=1.
Si vous ne souhaitez pas modifier le tableau d'origine, vous pouvez utiliser des propriétés calculées pour filtrer le tableau, telles que :
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>vue示例</title>
</head>
<body>
<p id="app">
<ul>
<template v-for="book in filterBooks">
<li>书名：{{book.name}}</li>
<li>作者：{{book.author}}</li>
</template>
</ul>
</p>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
books: [{
name: 'vuejs',
author: 'a'
},
{
name: 'js高级111',
author: 'b'
},
{
name: 'java33333',
author: 'c'
}
]
},
computed:{
filterBooks:function(){
return this.books.sort(function(a,b){
return a.name.length>b.name.length?1:-1
})
}
}
});
</script>
</body>
</html>Alors, comment vue écoute-t-il ? Qu'en est-il des changements dans les données ?
1) Comment suivre les modifications
Chaque instance de composant a un objet d'instance d'observateur correspondant, qui enregistrera les propriétés en tant que dépendances pendant le processus de rendu du composant lorsqu'une dépendance est créée. setter est appelé, l'observateur est invité à recalculer, ce qui entraîne la mise à jour de ses composants associés.
2) Problèmes de détection des modifications
En raison des limitations du JavaScript moderne (et de la dépréciation d'Object.observe), Vue ne peut pas détecter l'ajout ou la suppression de propriétés d'objet. Étant donné que Vue effectue le processus de conversion getter/setter sur la propriété lors de l'initialisation de l'instance, la propriété doit exister sur l'objet de données pour que Vue la convertisse afin qu'elle soit réactive. Par exemple :
var vm = new Vue({
data:{
a:1
}
})
// `vm.a` 是响应的
vm.b = 2
// `vm.b` 是非响应的Vue n'autorise pas l'ajout dynamique de nouvelles propriétés réactives au niveau racine sur des instances déjà créées. Cependant, il peut utiliser la méthode Vue.set(object, key, value) pour ajouter des propriétés de réponse aux objets imbriqués :
Vue.set(vm.someObject, 'b', 2)
Vous pouvez également utiliser vm.$ set méthode d'instance, qui est également un alias de la méthode globale Vue.set,
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Windows ne peut pas accéder au périphérique, au chemin ou au fichier spécifié
Jun 18, 2024 pm 04:49 PM
L'ordinateur d'un ami présente un tel défaut. Lors de l'ouverture de "Ce PC" et du fichier du lecteur C, il affichera "Explorer.EXE Windows ne peut pas accéder au périphérique, au chemin ou au fichier spécifié. Vous ne disposez peut-être pas des autorisations appropriées pour accéder au projet. " Y compris les dossiers, fichiers, cet ordinateur, la corbeille, etc., un double-clic fera apparaître une telle fenêtre, et un clic droit pour l'ouvrir est normal. Ceci est dû à une mise à jour du système. Si vous rencontrez également cette situation, l'éditeur ci-dessous vous apprendra comment la résoudre. 1. Ouvrez l'éditeur de registre Win+R et entrez regedit, ou cliquez avec le bouton droit sur le menu Démarrer pour exécuter et entrez regedit. 2. Localisez le registre « Computer\HKEY_CLASSES_ROOT\PackagedCom\ClassInd » ;
Comment supprimer les éléments en double du tableau PHP à l'aide de la boucle foreach ?
Apr 27, 2024 am 11:33 AM
La méthode d'utilisation d'une boucle foreach pour supprimer les éléments en double d'un tableau PHP est la suivante : parcourez le tableau, et si l'élément existe déjà et que la position actuelle n'est pas la première occurrence, supprimez-le. Par exemple, s'il existe des enregistrements en double dans les résultats de la requête de base de données, vous pouvez utiliser cette méthode pour les supprimer et obtenir des résultats sans enregistrements en double.
Windows suspend définitivement les mises à jour, Windows désactive les mises à jour automatiques
Jun 18, 2024 pm 07:04 PM
Les mises à jour Windows peuvent provoquer certains des problèmes suivants : 1. Problèmes de compatibilité : certaines applications, pilotes ou périphériques matériels peuvent être incompatibles avec les nouvelles mises à jour Windows, ce qui entraîne un dysfonctionnement ou un blocage. 2. Problèmes de performances : Parfois, les mises à jour de Windows peuvent ralentir le système ou subir une dégradation des performances. Cela peut être dû à de nouvelles fonctionnalités ou à des améliorations nécessitant davantage de ressources pour fonctionner. 3. Problèmes de stabilité du système : certains utilisateurs ont signalé qu'après l'installation des mises à jour Windows, le système pouvait rencontrer des pannes inattendues ou des erreurs d'écran bleu. 4. Perte de données : Dans de rares cas, les mises à jour Windows peuvent entraîner une perte de données ou une corruption de fichiers. C'est pourquoi avant d'effectuer des mises à jour importantes, sauvegardez votre
L'art de PHP Array Deep Copy : utiliser différentes méthodes pour obtenir une copie parfaite
May 01, 2024 pm 12:30 PM
Les méthodes de copie approfondie de tableaux en PHP incluent : l'encodage et le décodage JSON à l'aide de json_decode et json_encode. Utilisez array_map et clone pour créer des copies complètes des clés et des valeurs. Utilisez Serialize et Unsérialize pour la sérialisation et la désérialisation.
Inversion des valeurs clés du tableau PHP : analyse comparative des performances de différentes méthodes
May 03, 2024 pm 09:03 PM
La comparaison des performances des méthodes de retournement des valeurs de clé de tableau PHP montre que la fonction array_flip() fonctionne mieux que la boucle for dans les grands tableaux (plus d'un million d'éléments) et prend moins de temps. La méthode de la boucle for consistant à retourner manuellement les valeurs clés prend un temps relativement long.
Application de la fonction de regroupement de tableaux PHP dans le tri des données
May 04, 2024 pm 01:03 PM
La fonction array_group_by de PHP peut regrouper des éléments dans un tableau en fonction de clés ou de fonctions de fermeture, renvoyant un tableau associatif où la clé est le nom du groupe et la valeur est un tableau d'éléments appartenant au groupe.
Meilleures pratiques pour la copie approfondie des tableaux PHP : découvrez des méthodes efficaces
Apr 30, 2024 pm 03:42 PM
La meilleure pratique pour effectuer une copie complète d'un tableau en PHP consiste à utiliser json_decode(json_encode($arr)) pour convertir le tableau en chaîne JSON, puis à le reconvertir en tableau. Utilisez unserialize(serialize($arr)) pour sérialiser le tableau en chaîne, puis désérialisez-le en un nouveau tableau. Utilisez RecursiveIteratorIterator pour parcourir de manière récursive des tableaux multidimensionnels.
AMD publie une nouvelle mise à jour du micrologiciel AGESA pour corriger la vulnérabilité Zenbleed affectant les processeurs Zen 2
May 03, 2024 pm 04:31 PM
Selon les informations de ce site du 3 mai, MSI a publié aujourd'hui la mise à jour du micrologiciel AMDAM4AGESA1.2.0.Ca, qui corrige la vulnérabilité de sécurité Zenbleed dans l'APU Zen2 AMD Ryzen4000. La mise à jour du firmware publiée par MSI convient cette fois à presque toutes les cartes mères X570. Elle corrige principalement le CVE-2023-20593 pour les processeurs Zen2, qu'AMD classe comme menace moyenne. Remarque sur ce site : Le numéro de suivi des vulnérabilités est CVE-2023-20593, qui peut voler des données confidentielles à une vitesse de 30 Ko par cœur et par seconde. Cette attaque affecte tous les logiciels exécutés sur le processeur, y compris les machines virtuelles, les bacs à sable, les conteneurs et les processus. Bien que le but d’AGESA1.2.0.Ca
