Vue 仅在结果发生变化时才更新计算属性
P粉738046172
P粉738046172 2023-08-25 21:59:19
[Vue.js讨论组]

考虑以下对我遇到的问题的简化:

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,我可以创建一个带有观察者的结构,但它看起来很违反直觉。

P粉738046172
P粉738046172

全部回复(1)
P粉611456309

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

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

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

避免过于频繁地重新渲染

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

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

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号