Caching computed properties

While functions inside the methods option are executed every time we call them, functions in computed are cached based on the dependencies, which in turn are defined by everything reactive found inside the function.

In the next recipe, composing computed properties is explored, but you can easily imagine how you can have very heavy calculations on a computed property:

computed: {   trillionthDigitOfPi () {     // hours of computations and terabytes later...     return 2   } }

Then, you can use the same property over and over, without the need for re-evaluation at every usage:

unnecessarilyComplexDoubler (input) {   return input * this.trillionthDigitOfPi }

Every time we call this function, we just fetch the cached value ...

Get Vue.js 2 Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.