Vue aktualisiert berechnete Eigenschaften nur, wenn sich das Ergebnis ändert
P粉738046172
P粉738046172 2023-08-25 21:59:19
0
1
543
<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>
P粉738046172
P粉738046172

Antworte allen(1)
P粉611456309

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

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

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

避免过于频繁地重新渲染

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

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

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

Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage