Follow the series post about Vuejs language, today, we will go to the deep, try to understand more about Vuejs computed. It’s rained heavily in Ho Chi Minh city (make your mood not good) but I’m still writing this post. Always learn new things!

If you don’t know about the Vuejs Life Cycle and some method like (mounted, computed, …) in Vue, please read it first.

Vuejs computed is NOT a method in Vuejs lifecycle. It’s important and easy to understand. But some features we don’t know about it. Let start to know it now!

1. Computed properties

Firstly, the definition about Computed:

Computed properties sit halfway between properties of the data object and methods: you can access them as if they were properties of the data object, but they are specified as functions.

Please focus to the “sit halfway between”. It’s little difficult for beginner. Right?

When working with data, sometime we need to do something with data. But when?, and how?. Data need to access in another method, also can display in screen.

Oh, we got the return data. But the data prepare to need a little time to calculate. So where to put it? Call it each time the component is rendered?.

We have too many ideas, but in this case, computed method is very helpful. Let begin with the example below:

<div id="app">  
  <p>Sum of numbers: {{ numberTotal }}</p> 
</div> 
<script>  
  	new Vue({    
      el: '#app',    
      data: {      
        numbers: [5, 8, 3]    
      },    
      computed: {      
        numberTotal() {        
          return numbers.reduce((sum, val) => sum + val);      
        }    
      }  
    }); 
</script>

Although we could write the entire statement to calculate the total in the template, it’s much more convenient and readable to have it defined elsewhere.

With Vuejs computed, we can also access it in methods, other computed properties, and anywhere else in the component by using this keyword. This is amazing, right?

1.1 Automation change follow the value

Vuejs computed will help us to automation update the value. Imagine that the total items in the numbers array are changed. From user input, API response, calculate in another screen. Does the value numberTotal is changed?.

The answer is YES!.

When numbers change, numberTotal changes too, and the change is reflected in the template.

2. Different between computed and method

If Vuejs computed only help to prepare data, what’s make it different with mounted methods, or another methods?.

The first and the most important thing to use computed is: cached. Amazing, with mounted or created, each time the component render, we will calculator value. That’s is a problem with performance (if data is complex).

Let take a look example from Vue document:

<p>Reversed message: "{{ reverseMessage() }}"</p>

// in component
methods: {
  reverseMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

“The difference is that computed properties are cached based on their reactive dependencies. A computed property will only re-evaluate when some of its reactive dependencies have changed” – From Vue.org

So in another way, if you don’t want to cached value (belong to your consider), just use another method.

3. Vuejs Computed properties

One more fun fact about the Vuejs Computed. That’s they can’t accept the arguments. Why, if we need the arguments, no need to put it in the computed, just use methods.

If the computed method accept the arguments, and arguments change everytime the component render. How we can cache the value?.

Though it allows you to have a parametrized getter function bound to the Vue instance, you lose caching so not really any gain there, in fact, you may break reactivity (AFAIU)

4. Reference

• Computed Properties and Watchers
• Methods, Vuejs Computed, and Watchers in Vue.js
• Vue.js: Up and Running

Thanks for reading my post. Happy coding!. Please like and share facebook page.