Vue aktualisiert berechnete Eigenschaften nur, wenn sich das Ergebnis ändert

Question

Betrachten Sie die folgende Vereinfachung des Problems, auf das ich gestoßen bin:

export default {
    Daten () {
        zurückkehren {
            i_change_alot: 0,
        };
    },
    mount() {
        setInterval(() => {
            this.i_change_alot = Math.random();
        }, 10);
    },
    berechnet: {
        someComputedValue() {
            this.i_change_alot;
            
            gib 'a' zurück;
        }
    }
}

Ich habe ein Attribut i_change_alot erstellt, das sich alle 10 Millisekunden in einen zufälligen Wert ändert. Dies bedeutet, dass die Eigenschaft extrem reaktiv wird und daher die berechnete Eigenschaft auslöst.

Ich löse eine Abhängigkeit aus (zum Beispiel), indem ich einfach this.i_change_alot aufrufe, aber das result ändert sich nie.

Das Endergebnis ist, dass die berechnete Eigenschaft someCompulatedValue alle 10 Millisekunden aktualisiert wird, was meines Wissens ein erneutes Rendern der Ansicht auslöst.

Wie kann ich someCompulatedValue nur dann neu rendern, wenn sich value/result

(Bei der ursprünglichen Frage ging es um die Anzeige reaktiver relativer Datumsangaben, z. B. „vor 1 Sekunde“, „vor 2 Sekunden“ usw. vor 31 Minuten Dies bedeutet, dass sich die Zeichenfolgendarstellung eine ganze Minute lang nicht geändert hat, aber aufgrund der Abhängigkeit vom Datumsattribut immer noch alle 10 Millisekunden neu gerendert wird.

Laut https://github.com/vuejs/vue/issues/11399 kann ich eine Struktur mit einem Beobachter erstellen, aber es sieht nicht intuitiv aus.

Answer 1

为什么Vue在值不变的情况下会触发计算？

因为Vue在重新计算之前永远不会知道最终结果是否改变。因此，每当其依赖项发生变化时，计算变量都会重新计算，这是无法避免的。

常见的误解是 Vue 通过计算变量的值来缓存计算变量，但实际上，Vue 通过其依赖项的状态来缓存计算变量。

避免过于频繁地重新渲染

您可以创建一个观察程序（如您所知）或将使用计算值的模板包装到组件中。

为什么要在这里包装到另一个组件帮助中？

因为 Vue 会将你的模板转换为渲染函数。每次其依赖项发生变化时，该函数都会重新计算。听起来有点熟？是的，它的工作原理就像一个计算变量。渲染函数的依赖项是您在模板中使用的所有变量。因此，如果您将频繁更改的变量包装到一个组件中，Vue 将仅重新渲染该组件，并避免重新渲染您的大组件。这将对你的表现产生很大的影响