Computed properties and caching for a happier you with Vue.js part 3 of 3.
Horatio, Netflix, and Life before Computed Properties
So far I’ve really enjoyed my time with Vue.js. Great documentation, great developer productivity. It’s just enjoyable to work with. While Vue.js has many things to enjoy, one great tool Vue.js gives is that of Computed Properties. Imagine the following scenario. Let’s say we’ve got a model of our data which we’ll call Horatio for now. The properties on this model may include
This data tells us a few things. First, Horatio has about 19 days worth of food and about 4 days worth of water on hand. He also likes to binge watch Netflix. Assuming he has some kind of bathroom solution in place such that he is able to continue watching Netflix without being interrupted, it would appear our dear Horatio McGuggenschlaufer can binge watch almost 4 days before his water supply is depleted, at which point he would be forced to break away from the screen and replenish his reserves. But what if we want to check in on him occasionally during his binge session to see how his food and water supplies are holding up as he burns season 5 of The Wire into his retinas? We could simply look at his
daysWorthOfWaterOnHand attributes. But what if Guggenschlaufer eats or drinks some during that time? First, some functions need to be implemented to subtract amounts from
Great! Functions are now in place to update food and water reserves. Anytime Horatio eats food (667 calories/meal) or drinks water (0.5 liters per drink), we update the
amountOfWaterAvailableInLiters variables. But if we want to display how man days of food or water Horatio has left, we now need to create functions to update those properties in our data object and call them any time we call the
We now have a workable solution in place. Whenever Horatio eats or drinks, the
daysOfFood/WaterOnHand properties are updated, resulting in up to date information within our templates. Awesome!
Computed Properties; Simplifying Code and Taking Names
However, Vue.js gives us a Better Way™. What if, instead of having properties that contain the days of food and days of water amounts, we use a computed property? What is a computed property? Well I’m glad you asked! A computed property can be defined as a function that returns a value which is calculated from the values of an object’s properties. What is more, the calculated value is cached so future calls don’t execute the calculation code, thus saving resources. However, if any of the properties used in that calculation are changed, the next time the function is called the cache is invalidated, the calculation code is run, and the new value is cached and returned.
A simple example of this would be someone’s age. If you have stored someone’s birthdate in your database and exposed that value as a property on one of your Vue.js objects, you could add a computed property called age on that object that would calculate a person’s age based on their birthdate. Let’s see how this would play out for our dear Horatio.
So this is pretty neat, I think. Here, the daysOfFood/WaterOnHand properties were removed from the
data object and placed inside the
computed object. The result is a template that can be equally expressive, allowing you to pass in
daysOfFood/WaterOnHand without having to define those properties on your object and constantly update them with custom function calls when certain properties change. And bonus! Values get cached until dependent properties change, making your code more performant!
Summary 5 hrs in
Vue.js continues to impress me. I enjoy the simplicity of it, the documentation is simple and understandable, and I feel as though I am able to better understand the code I’m writing. Up next in the 10 Hours With: Vue.js series; Components, Single File Components, and Creating a Modular Vue.js Application.