CODEWITHSUNDEEP
javascriptvue.js
Dave
Dave

Reputation: 12457

In Vue.js, how to disable caching of computed properties?

Before 0.12.8, computed properties behave just like getters - every time you access it, the getter function is re-evaluated. In 0.12.8 this has been improved - computed properties are cached and lazily re-evaluated only when necessary.

For my current project, I actually need some properties to be re-evaluated on every access. The reason the current lazy evaluation isn't working is because in some of my properties there are other "dynamic variables" that are not under Vue.js's watch.

Upvotes: 18

Views: 27760

Answers (3)

bigsee
bigsee

Reputation: 959

According to the official docs, although the earlier answers from @Xethron and @Илья Зеленько were correct up to Vue 1.x, they have been deprecated since then in favour of a method-based approach.

So the above examples would change from this:

computed: {
  example: {
    cache: false,
    get () {
      return Date.now() + this.msg
    }
  }
}

...to this:

methods: {
  getExample () {
    return Date.now() + this.msg
  }
}

N.B note that we would now access the value in the template by calling the function, so this:

<p>message: {{ example }}</p>

...needs to be this:

<p>message: {{ getExample() }}</p>

Upvotes: 6

Илья Зелень
Илья Зелень

Reputation: 8078

You can use way from @Xethron but using the short syntax of functions:

computed: {
  example: {
    cache: false,
    get () {
      return Date.now() + this.msg
    }
  }
}

Upvotes: 6

Xethron
Xethron

Reputation: 1156

According to the docs, you can simply set cache to false:

computed: {
  example: {
    cache: false,
    get: function () {
      return Date.now() + this.msg
    }
  }
}

Upvotes: 38

Related Questions