WHAT YOU ARE GOING TO LEARN?

  1. What are computed properties?
  2. How they are different from a method?
  3. When to use method and computed properties?

COMPUTED PROPERTIES

I am going to explain this with the help of example where we have a counter data property in our VUE instance and we want to increment it when we click the increment button and decrement when we click decrement button. Then we want to call a method result that will return a string based on the value of counter i.e it is greater or less than 5.

SIMPLE VUE INSTANCE

JAVASCRIPT

new Vue({
 el: "#app", data: { counter : 0 }, methods: { result: function(){ return this.counter>5? "COUNTER IS GREATER THAN 5":"COUNTER IS SMALLER THAN 5"; } } })

OUTPUT

output of code

 

The above code is working fine we increment the counter property and every time before re-rendering the DOM it executes the result function and return accordingly. What if we have another counter let say that secondcounter and we can increment that as well. Problem is even we are not incrementing the counter variable it will still execute the result function every time before re-rendering the DOM which is useless. Even though result function is independent of secondcounter property. This is where computed properties become handy.

Actually, when we are using the method in VUE instance it executes it each time DOM is re-rendered and doesn’t really bother what’s in there even though it’s not needed. But on contrast, computed properties are only executed if there is something on which computed properties depends upon gets the change we can say computed properties code got analyzed by the VUE while methods are not that’s why computed properties are only executed when it really needs to but methods will execute all the time.

Don’t worry just focus on the below example if it is not clear yet

VUE INSTANCE WITH TWO COUNTERS

JAVASCRIPT

new Vue({ el: "#app", data: { counter : 0, secondcounter: 0 }, methods: { result: function(){
 console.log("result method executed")
 return this.counter>5? "COUNTER IS GREATER THAN 5":"COUNTER IS SMALLER THAN 5"; } } })

OUTPUT

 

As you can see the above output. It can be clearly seen in the console that result method got executed 10 times even when we increment the second counter however that does not affect the result function output.

VUE INSTANCE WITH COMPUTED PROPERTIES

JAVASCRIPT

new Vue({ el: "#app", computed: { output: function(){ console.log("computed propery get executed"); return this.secondcounter > 5? "SECOND COUNTER > 6": "SECOND COUNTER < 5"; } }, data: { counter : 0, secondcounter: 0 }, methods: { result: function(){ console.log("result method executed") return this.counter>5? "COUNTER > 5":"COUNTER < 5"; } } }) OUTPUT

Now, we can see in the console that result function is executed each time regardless of which property we are changing counter or secondcounter but computed property only got executed when we are changing secondcounter property because VUE.JS know that it depends on secondcounter property.

So, we should use computed properties instead of methods when it needs to execute when specific attribute got change while methods when we want something to execute each time DOM is re-rendered.

SUM UP:

Hope you enjoy reading this and learn some new cool stuff. Let me know how can I make it better for you guys. happy coding 🙂