I WANT IT NOW!

Why Vue.js computed Date.now() doesn't update? #12

In the example below, you can type as much as you want, but the timestamp will never be updated.

That's because Vue caches the value returned from computed and data properties. The only way to invalidate that cache, is changing the data. And in that case, there's no way to do that.

Vue docs recommends to use a method instead, because it doesn't cache methods returns.

Now the timestamp will update after each change.

Other solution is to return Date.now() together with a reactive property, like this:

computed: {
now () {
return `Hi ${this.name}, now is ${Date.now()}`
}
}

This way, always that name changes, now cache is invalidated and evaluated again:

BUT I WANT IT NOW!

Ok, if you really want the time to be updated in realtime, you have to change it in realtime. Every millisecond would be too much, every second is enough.

But there're times when cached data is not a problem

Suppose you want to generate a unique id to use with label for. In that case, once the id was generated, it can be cached with no harm.

computed: {
labelForId () {
return `${this.$options.name}-${this._uid}`
}
}
Show your support

Clapping shows how much you appreciated Marcos Neves’s story.