Introduction to Computed Properties in VueJS

As we are going ahead with Vue.js Tutorials we are able to see that the Template syntax is highly declarative. This declarative syntax makes Vue.js easy to grasp and as a framework, it becomes easy to incorporate into the system. Templates can conceive a very complex logic but having a complex logic in a template soon becomes pretty tedious and can lead to fatal errors at places. Moreover, you can see the whole system is broken down due to heavy logic which turns out to be unmaintainable soon as the system grows. Consider the logic for formatting time below

Above you can see that we have a data point or a variable called date which is bound with the UI using Vue.js. As we go ahead we see that this particular Vue.js component, which also serves as the Root component has a very complex logic in order to build UI for date representation. The facility of template based JavaScript computation that Vue.js gives is being exploited to the core leading to a very messy code. This does enable you for Data Binding but leaves the code is an unmanageable state.

In order to get out of this situation, we use Computed Properties in VueJS. This computed properties in VueJS are being calculated in the Vue instance itself. So for all such complex logic, one should always use Computed Properties. Let’s see a basic example of using Computed Properties and make the sample work.

Implementation of Computed Properties in VueJS

We will directly start by changing the way the Template looks like. Let’s modify the template to something like below

Rather than the large computation as shown previously we just replace the date with another property which will be computed using the existing property called date. The Vue.js Code for the same will go as shown below

You can see how the computed property results in a property value called formattedDate and the function provided for the same is treated as a getter function.

NOTE: The value of the formattedDate will always depend on date and any update to date will be reflected the formattedDate . This binding leads to an auto update and also makes the template response quickly. See the sample below in order to understand this concept. This is a simple example where an interval is set and we randomly update the date property, you can see how the computed property immediately changes on updating date property.

The Vue.js code goes below where we can see the setInterval function which executes after every one second updating the date.

The HTML will go as the above itself. Let’s have a look at the complete working demo code Via a GIF. The code is also available at JSFiddle.

Vue.js Computed Properties

Vue.js Computed Properties

You can alternatively have a look at JSFiddle as well below.

I will also recommend you to have a look at the Vue.js Watchers tutorials in order to understand the difference between Computed properties and watcher.

Now if you guys have not got a chance to have a look at other Vue.js tutorials, you can alternatively have a look at the entire Vue.js section. Here goes the list of the entire Vue.js Tutorials.

Also published on Medium.

Join our 2500+ fellow readers

Join our 2500+ fellow readers

Joining our mailing list will for sure keep you at the top of Web Development Ecosystem. Connect with us and also other fellow developers.

You have Successfully Subscribed!

Pin It on Pinterest

Share This