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 将仅重新渲染该组件，并避免重新渲染您的大组件。这将对你的表现产生很大的影响