Pourquoi Vue ne peut-il pas détecter les changements de tableau ? Les raisons sont les suivantes

Description du problème : Vue détecte les modifications de données via Object.defineProperty, il est donc compréhensible qu'il ne puisse pas surveiller l'opération d'ajout du tableau, car cette opération de détection et de liaison a été effectuée pour toutes les propriétés du constructeur.

Mais le texte officiel : en raison des limitations de JavaScript, Vue ne peut pas détecter les tableaux modifiés suivants :

Lorsque vous utilisez l'index pour définir directement un élément, par exemple : vm.items[indexOfItem] = newValue
Lorsque vous modifiez la longueur d'un tableau, par exemple : vm.items.length = newLength

Que signifie cette phrase ? J'ai testé qu'Object.defineProperty peut définir la propriété accesseur de la propriété via la propriété index, alors pourquoi ne peut-elle pas être surveillée ?

Certaines personnes sur le forum ont dit que parce que la longueur du tableau est variable, même si la longueur est de 5, il se peut qu'il n'ait pas d'index 4. Je voudrais demander d'où vient cette réponse si vous modifiez. la longueur, le nouvel élément sera ajouté à la fin, sa valeur n'est pas définie et leurs valeurs peuvent être obtenues via l'index. Pourquoi est-il appelé « peut ne pas avoir d'index 4 » ?

Puisque nous connaissons la longueur du tableau, pourquoi ne pouvons-nous pas parcourir tous les éléments, ajouter un ensemble et parcourir l'attribut index ? Pouvons-nous mettre à jour la vue en même temps ?

Si je dois dire, compte tenu du problème de performances, en supposant que le contenu de l'élément n'a que 4 valeurs significatives, mais que la longueur est bien de 1000, il nous est impossible d'effectuer des opérations de détection pour 1000 éléments. Mais le responsable a dit que cela était dû aux limitations de JS. Je veux savoir quelle est cette limitation ? Merci beaucoup de m'avoir aidé à résoudre ce problème.

---

---

Face à ce problème, ce que je veux dire, c'est tout d'abord un tableau d'une longueur de 1000 mais seulement de 4 éléments. n'est pas nécessairement Cela affectera les performances, Car en plus de la boucle for, le parcours des données dans js comprend également forEach, map, filter, some, etc., à l'exception de la boucle for (for, for.. .of), les autres parcours concernent tous les valeurs clés, c'est-à-dire que les postes vacants autres que ces quatre éléments ne seront pas parcourus, il n'y aura donc pas de perte de performances Parce que s'il n'y a pas d'opérations dans le corps de la boucle. , l'impact sur les performances sera négligeable, comme suit. C'est le résultat du parcours d'un tableau d'une longueur de 10 000 mais seulement de deux éléments utilisant respectivement for et forEach :

var arr = [1]; arr[10000] = 1
function a(){
    console.time()
    for(var i = 0;i<arr.length;i++)console.log(1)
    console.timeEnd()
}
a(); //default: 567.1669921875ms
a(); //default: 566.2451171875ms

function b(){
    console.time()
    arr.forEach(item=>{console.log(2)})
    console.timeEnd()
}
b(); //default: 0.81982421875ms
b(); //default: 0.434814453125ms

Vous pouvez voir que le résultat est très évident. Cependant, si aucune opération n'est effectuée dans la boucle for, la vitesse des deux Presque

Deuxièmement, ce que je veux dire, c'est que je ne sais pas quelle est cette limite (⇀‸↼ ‶) ╮ (• ́ω • ̀) ╭

La méthode object.defineProperty () sera Définit une nouvelle propriété directement sur un objet, ou modifie une propriété existante d'un objet, et renvoie l'objet. L'index du tableau est également un attribut, nous pouvons donc surveiller les changements dans les éléments du tableau

var arr = [1,2,3,4]
arr.forEach((item,index)=>{
    Object.defineProperty(arr,index,{
        set:function(val){
            console.log('set')
            item = val
        },
        get:function(val){
            console.log('get')
            return item
        }
    })
})
arr[1]; // get  2
arr[1] = 1; // set  1

Mais si nous ajoutons un nouvel élément, l'événement d'écoute ne sera pas déclenché, car nous ne surveillons pas cela nouvel attribut, supprimez-le. Il en va de même pour une propriété.

Retour à la question principale, puisque les tableaux peuvent être surveillés, pourquoi Vue ne peut-il pas détecter les changements dans les éléments du tableau causés par

, même si l'élément correspondant à l'indice existe, et étant surveillé ? vm.items[indexOfItem] = newValue

Afin de clarifier ce problème, je l'ai testé avec le code source de vue Voici le code source de vue pour la surveillance des données :

Vous pouvez voir. que lorsque les données sont un tableau Lorsque les données sont un tableau, il cessera de surveiller les attributs des données. Modifions le code source :

pour que lorsque les données sont un tableau, c'est le cas. les attributs seront toujours surveillés, puis imprimeront quelque chose dans le get et le set dans la fonction definitionReactive, afin que nous sachions que get et set sont appelés. Un jugement simple est ajouté ici, en regardant uniquement l'obtention des éléments du tableau, set

puis en écrivant un cas simple, testant principalement si l'utilisation de

pour changer l'élément du tableau peut être surveillé et page de rendu réactif vm.items[indexOfItem] = newValue

Page d'exécution

Vous pouvez voir qu'après avoir exécuté get 6 fois, la longueur de notre tableau est de 3, c'est-à-dire pour dire Le tableau est parcouru deux fois. Pas plus de deux fois Lorsque la page est rendue une fois, un événement d'écoute de données peut être déclenché plusieurs fois, même si les données ne sont utilisées qu'une seule fois. Les détails spécifiques doivent être déterminés par la façon dont vous écrivez le code. Prenez ceci par exemple, lorsque les données surveillées sont un tableau, la fonction dependArray sera exécutée (le code est dans l'implémentation de get dans l'image ci-dessus. Dans cette fonction, le tableau est parcouru et la valeur est obtenue, donc là). sera trois fois de plus, ici Principalement la surveillance par Vue du tableau arr dans les données déclenche la fonction dependArray.

Quand on clique sur un des éléments par exemple, je clique sur 3

Vous pouvez voir que set est exécuté une fois, puis les données sont mises à jour, la page est restituée et le tableau est parcouru deux fois.

Mais ! ! ! Le tableau est en effet devenu responsive, ce qui signifie que la fonction de syntaxe js ne limite pas le suivi du tableau.

Ici, nous testons avec un tableau de longueur 3. Lorsque j'augmente la longueur du tableau à 9

Vous pouvez voir que 18 fois get sont exécutées, et le array Il est toujours parcouru deux fois. La même chose s'applique au clic sur un élément. Il est également parcouru deux fois lors du rendu.

Après l'expérience ci-dessus, j'ai conclu que les tableaux peuvent être mis à jour de manière réactive dans vue, mais je ne comprends pas pourquoi Youda n'a pas ajouté cette fonctionnalité à cause de ses considérations, j'espère. il y a des experts qui en savent assez pour me donner quelques conseils

Articles associés :

Problème de détection de changement de tableau dans vue

Pourquoi le json renvoyé ? Ne peut pas être converti en tableau

Vidéos associées :

Détection de changement de tableau - Tutoriel vidéo Vue.js de Wheat Academy

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!