Vue met à jour les propriétés calculées uniquement lorsque le résultat change

Question

Considérez la simplification suivante du problème que j'ai rencontré :

export par défaut {
    données () {
        retour {
            i_change_alot : 0,
        } ;
    },
    monté() {
        setInterval(() => {
            this.i_change_alot = Math.random();
        }, dix);
    },
    calculé : {
        uneValeurComputée() {
            this.i_change_alot;
            
            renvoie « a » ;
        }
    }
}
≪/pré>
J'ai créé un attribut i_change_alot qui change en une valeur aléatoire toutes les 10 millisecondes. Cela signifie que la propriété devient extrêmement réactive, elle déclenchera donc la propriété calculée. 
Je déclenche une dépendance (à des fins d'exemple) en appelant simplement this.i_change_alot, mais le result de la propriété calculée ne change jamais. 
Le résultat final est que la propriété calculée someCompulatedValue est mise à jour toutes les 10 millisecondes, ce qui, pour autant que je sache, déclenche le nouveau rendu de la vue. 
Comment puis-je faire en sorte que someCompulatedValue ne soit restitué que lorsque value/result 
(La question initiale concernait l'affichage de dates relatives réactives, telles que "il y a 1 seconde", "il y a 2 secondes", etc. Cependant, après un certain temps, cela devient il y a 30 minutes, < code>il y a 31 minutes Cela signifie que pendant une minute complète, la représentation sous forme de chaîne n'a pas changé, mais elle est toujours restituée toutes les 10 millisecondes en raison de la dépendance à l'attribut date). 
Selon https://github.com/vuejs/vue/issues/11399, je peux créer une structure avec un observateur, mais cela semble contre-intuitif. 
            

Answer 1

Pourquoi Vue déclenche-t-il des calculs lorsque la valeur ne change pas ?

Parce que Vue ne saura jamais si le résultat final a changé jusqu'à ce qu'il recalcule. Par conséquent, la variable calculée sera recalculée à chaque fois que ses dépendances changent, ce qui est inévitable.

Une idée fausse courante est que Vue met en cache les variables calculées en calculant leur valeur, mais en fait, Vue met en cache les variables calculées en fonction de l'état de leurs dépendances.

Évitez de refaire le rendu trop fréquemment

Vous pouvez créer un observateur (comme vous le savez) ou envelopper le modèle en utilisant la valeur calculée dans le composant.

Pourquoi l'intégrer dans un autre composant d'aide ici ?

Parce que Vue convertira votre modèle en fonction de rendu. La fonction est recalculée à chaque fois que ses dépendances changent. Semble familier? Oui, cela fonctionne comme une variable calculée. Les dépendances de la fonction de rendu sont toutes les variables que vous utilisez dans le modèle. Ainsi, si vous enveloppez des variables qui changent fréquemment dans un composant, Vue ne restituera que ce composant et évitera de restituer votre gros composant. Cela aura un grand impact sur vos performances