考虑以下对我遇到的问题的简化:
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,我可以创建一个带有观察者的结构,但它看起来很违反直觉。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
为什么Vue在值不变的情况下会触发计算?
因为Vue在重新计算之前永远不会知道最终结果是否改变。因此,每当其依赖项发生变化时,计算变量都会重新计算,这是无法避免的。
常见的误解是 Vue 通过计算变量的值来缓存计算变量,但实际上,Vue 通过其依赖项的状态来缓存计算变量。
避免过于频繁地重新渲染
您可以创建一个观察程序(如您所知)或将使用计算值的模板包装到组件中。
为什么要在这里包装到另一个组件帮助中?
因为 Vue 会将你的模板转换为渲染函数。每次其依赖项发生变化时,该函数都会重新计算。听起来有点熟?是的,它的工作原理就像一个计算变量。渲染函数的依赖项是您在模板中使用的所有变量。因此,如果您将频繁更改的变量包装到一个组件中,Vue 将仅重新渲染该组件,并避免重新渲染您的大组件。这将对你的表现产生很大的影响