亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

Vue 僅在結(jié)果變更時才更新計算屬性
P粉738046172
P粉738046172 2023-08-25 21:59:19
0
1
652
<p>考慮以下對我遇到的問題的簡化:</p> <pre class="brush:js;toolbar:false;">export default { data () { return { i_change_alot: 0, }; }, mounted() { setInterval(() => { this.i_change_alot = Math.random(); }, 10); }, computed: { someComputedValue() { this.i_change_alot; return 'a'; } } } </pre> <p>我建立了一個屬性<code>i_change_alot</code>,它每 10 毫秒更改為一個隨機(jī)值。這意味著該屬性變得極其反應(yīng)性,因此它將觸發(fā)計算屬性。 </p> <p>透過簡單地呼叫<code>this.i_change_alot</code>,我觸發(fā)了一個依賴項(出於範(fàn)例目的),但是計算屬性的<em>結(jié)果</em>永遠(yuǎn)不會改變。 </p> <p>最終結(jié)果是計算屬性 <code>someCompulatedValue</code> 每 10 毫秒更新一次,據(jù)我所知,這會觸發(fā)視圖重新渲染。 </p> <p>如何讓 <code>someCompulatedValue</code> 只在<em>值/結(jié)果</em>改變時重新渲染? </p> <p>(最初的問題是關(guān)於顯示反應(yīng)性相對日期,例如“1秒前”、“2秒前”等。但是,一段時間後,這會變成<code>30分鐘前</ code>,< code>31 分鐘前</code> 這意味著在整整一分鐘內(nèi),字串表示形式?jīng)]有更改,但由於依賴日期屬性,它仍然每10 毫秒重新渲染一次)。 </p> <p>根據(jù) https://github.com/vuejs/vue/issues/11399,我可以創(chuàng)建一個帶有觀察者的結(jié)構(gòu),但它看起來很違反直覺。 </p>
P粉738046172
P粉738046172

全部回覆(1)
P粉611456309

為什麼Vue在值不變的情況下會觸發(fā)計算?

因?yàn)閂ue在重新計算之前永遠(yuǎn)不會知道最終結(jié)果是否改變。因此,每當(dāng)其依賴項發(fā)生變化時,計算變數(shù)都會重新計算,這是無法避免的。

常見的誤解是 Vue 透過計算變數(shù)的值來快取計算變量,但實(shí)際上,Vue 透過其依賴項的狀態(tài)來快取計算變數(shù)。

避免過於頻繁地重新渲染

您可以建立一個觀察程式(如您所知)或?qū)⑹褂糜嬎阒档墓?fàn)本包裝到元件中。

為什麼要在這裡包裝到另一個元件幫助?

因?yàn)?Vue 會將你的範(fàn)本轉(zhuǎn)換為渲染函數(shù)。每次其依賴項發(fā)生變化時,該函數(shù)都會重新計算。聽起來有點(diǎn)熟?是的,它的工作原理就像計算變數(shù)。渲染函數(shù)的依賴項是您在模板中使用的所有變數(shù)。因此,如果您將頻繁更改的變數(shù)包裝到一個元件中,Vue 將僅重新渲染該元件,並避免重新渲染您的大元件。這將對你的表現(xiàn)產(chǎn)生很大的影響

最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板