Vue aktualisiert berechnete Eigenschaften nur, wenn sich das Ergebnis ändert
P粉738046172
2023-08-25 21:59:19
<p>Betrachten Sie die folgende Vereinfachung des Problems, auf das ich gestoßen bin: </p>
<pre class="brush:js;toolbar:false;">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;
}
}
}
</pre>
<p>Ich habe ein Attribut <code>i_change_alot</code> 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. </p>
<p>Ich löse eine Abhängigkeit aus (zum Beispiel), indem ich einfach <code>this.i_change_alot</code> aufrufe, aber das <em>result</em> ändert sich nie. </p>
<p>Das Endergebnis ist, dass die berechnete Eigenschaft <code>someCompulatedValue</code> alle 10 Millisekunden aktualisiert wird, was meines Wissens ein erneutes Rendern der Ansicht auslöst. </p>
<p>Wie kann ich <code>someCompulatedValue</code> nur dann neu rendern, wenn sich <em>value/result</em> </p>
<p>(Bei der ursprünglichen Frage ging es um die Anzeige reaktiver relativer Datumsangaben, z. B. „vor 1 Sekunde“, „vor 2 Sekunden“ usw. <code>vor 31 Minuten</code> 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. </p>
<p>Laut https://github.com/vuejs/vue/issues/11399 kann ich eine Struktur mit einem Beobachter erstellen, aber es sieht nicht intuitiv aus. </p>
为什么Vue在值不变的情况下会触发计算?
因为Vue在重新计算之前永远不会知道最终结果是否改变。因此,每当其依赖项发生变化时,计算变量都会重新计算,这是无法避免的。
常见的误解是 Vue 通过计算变量的值来缓存计算变量,但实际上,Vue 通过其依赖项的状态来缓存计算变量。
避免过于频繁地重新渲染
您可以创建一个观察程序(如您所知)或将使用计算值的模板包装到组件中。
为什么要在这里包装到另一个组件帮助中?
因为 Vue 会将你的模板转换为渲染函数。每次其依赖项发生变化时,该函数都会重新计算。听起来有点熟?是的,它的工作原理就像一个计算变量。渲染函数的依赖项是您在模板中使用的所有变量。因此,如果您将频繁更改的变量包装到一个组件中,Vue 将仅重新渲染该组件,并避免重新渲染您的大组件。这将对你的表现产生很大的影响