Vue如何仅在计算属性结果变化时才触发更新？

问题场景 #

先看简化示例代码：

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毫秒就更新一次，导致依赖它的计算属性someComputedValue也跟着频繁触发更新，但计算结果始终是'a'，完全没必要触发视图重渲染。

实际场景是显示相对时间（比如"1秒前""30分钟前"），当时间差进入分钟级别后，整整一分钟内字符串都不会变化，但因为依赖的原始时间戳一直在更新，所以还是会触发无效的频繁重渲染。

解决方案 #

方案1：给计算属性加本地缓存 #

在组件内维护一个缓存值，只有当新计算的结果和缓存值不同时，才更新缓存并返回新值；否则直接返回缓存值。Vue会检测到返回值未变化，就不会触发重渲染。

修改示例代码：

export default {
    data () {
        return {
            i_change_alot: 0,
            _cachedResult: null // 用于缓存计算结果
        };
    },
    mounted() {
        setInterval(() => {
            this.i_change_alot = Math.random();
        }, 10);
    },
    computed: {
        someComputedValue() {
            // 实际场景中这里替换成你的相对时间计算逻辑
            const newResult = 'a';
            if (newResult !== this._cachedResult) {
                this._cachedResult = newResult;
            }
            return this._cachedResult;
        }
    }
}

方案2：使用缓存工具函数（如lodash.memoize） #

如果是复杂计算逻辑，可以用现成的缓存函数，让计算逻辑仅在输入参数变化时重新执行。比如用lodash的_.memoize：

import _ from 'lodash';

export default {
    data () {
        return {
            i_change_alot: 0,
        };
    },
    mounted() {
        setInterval(() => {
            this.i_change_alot = Math.random();
        }, 10);
    },
    computed: {
        someComputedValue() {
            // 把计算逻辑封装成带缓存的函数，依赖变量作为参数传入
            const cachedCompute = _.memoize((dep) => {
                // 这里替换成你的相对时间计算逻辑
                return 'a';
            });
            return cachedCompute(this.i_change_alot);
        }
    }
}

注：_.memoize默认用参数浅比较，若依赖复杂对象，可自定义缓存key生成函数。

方案3：针对相对时间场景优化更新频率 #

根据时间差动态调整定时器间隔，从根源减少依赖变量的更新次数：

• 1分钟内：每秒更新一次
• 1小时内：每分钟更新一次
• 超过1小时：每小时更新一次

示例代码：

export default {
    data () {
        return {
            targetTimestamp: Date.now(), // 替换成你的目标时间戳
            updateTimer: null
        };
    },
    mounted() {
        this.startDynamicUpdate();
    },
    beforeUnmount() {
        clearInterval(this.updateTimer);
    },
    methods: {
        startDynamicUpdate() {
            const diff = Date.now() - this.targetTimestamp;
            // 根据时间差设置更新间隔
            let interval = 1000; // 默认1秒
            if (diff > 3600000) interval = 3600000; // 1小时
            else if (diff > 60000) interval = 60000; // 1分钟

            this.updateTimer = setInterval(() => {
                this.targetTimestamp = Date.now();
                clearInterval(this.updateTimer);
                this.startDynamicUpdate();
            }, interval);
        }
    },
    computed: {
        relativeTime() {
            const diff = Date.now() - this.targetTimestamp;
            if (diff < 60000) return `${Math.floor(diff/1000)}秒前`;
            else if (diff < 3600000) return `${Math.floor(diff/60000)}分钟前`;
            else return `${Math.floor(diff/3600000)}小时前`;
        }
    }
}

补充说明 #

用watch实现确实不够直观，以上方案均基于计算属性本身优化，更贴合Vue的响应式设计思路。

内容的提问来源于stack exchange，提问作者Flame