Vue 僅在結果變更時才更新計算屬性

Question

考慮以下對我遇到的問題的簡化：

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';
        }
    }
}

我建立了一個屬性i_change_alot，它每 10 毫秒更改為一個隨機值。這意味著該屬性變得極其反應性，因此它將觸發計算屬性。

透過簡單地呼叫this.i_change_alot，我觸發了一個依賴項（出於範例目的），但是計算屬性的結果永遠不會改變。

最終結果是計算屬性 someCompulatedValue 每 10 毫秒更新一次，據我所知，這會觸發視圖重新渲染。

如何讓 someCompulatedValue 只在值/結果改變時重新渲染？

（最初的問題是關於顯示反應性相對日期，例如“1秒前”、“2秒前”等。但是，一段時間後，這會變成30分鐘前，< code>31 分鐘前 這意味著在整整一分鐘內，字串表示形式沒有更改，但由於依賴日期屬性，它仍然每10 毫秒重新渲染一次）。

根據 https://github.com/vuejs/vue/issues/11399，我可以創建一個帶有觀察者的結構，但它看起來很違反直覺。

Answer 1

為什麼Vue在值不變的情況下會觸發計算？

因為Vue在重新計算之前永遠不會知道最終結果是否改變。因此，每當其依賴項發生變化時，計算變數都會重新計算，這是無法避免的。

常見的誤解是 Vue 透過計算變數的值來快取計算變量，但實際上，Vue 透過其依賴項的狀態來快取計算變數。

避免過於頻繁地重新渲染

您可以建立一個觀察程式（如您所知）或將使用計算值的範本包裝到元件中。

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

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