Let's dive into a simplified version of the problem at hand:
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 have created a property called i_change_alot which changes to a random value every 10 milliseconds, making it highly reactive and causing the computed property to be triggered.
Simply by referencing this.i_change_alot, I am able to trigger a dependency (for illustrative purposes), but the end result of the computed property remains constant.
This setup leads to the computed property someComputedValue being updated every 10 ms, subsequently triggering a rerender of the view.
How can we adjust this so that someComputedValue only updates when the value/outcome changes?
(The original issue pertains to displaying dynamically updating relative dates such as "1 second ago", "2 seconds ago," etc. However, once it reaches "30 minutes ago" and beyond, the string representation does not change for a full minute, yet continues to rerender every 10 ms due to the dependent date property).
As per https://github.com/vuejs/vue/issues/11399, one solution could involve structuring a watcher, although this approach may seem counterintuitive.