Vue From The TOP— Computed vs Methods — Explained With Example

Hello and welcome to a series called Vue from the TOP.

A lot of developers who are learning Vue Js have confusion between computed properties and methods.

When to use computed properties and when to use methods?

This is the big question we will tackle today. And hopefully, by the end of this post, you will understand the importance of computed properties and how they fit into the Vue ecosystem.

As stated in my previous article, I like to call computed properties as advanced variables or in our case - advanced data properties.

Before we look into when to use a certain property we need to know why we use them. I go over in depth regarding computed properties and methods with a few examples in this post. You can come back after checking it out.

Alright, now that we have a good understanding of what is a computed property and what is a method, we can look into which is more efficient and why.

Coming to the main question at hand, many new developers wonder, why we cannot use methods as computed properties. In the following example, we will look into why we should not use methods as computed properties and why.

Setting Up the Project

Create a new Vue project and empty the app.vue file so we can write our code.

In the component, let's create two input fields and two paragraph elements.

One input field will take in a number, and another input field will take in a string. One of the paragraph elements will be used to display the computed property and the other paragraph element is used to display the method.

Here the computed property and the method will perform the same action.

The template should look something as follows.

So, with respect to the template, the script should look something as follows.

Let's go over the code to understand it a bit better.

In the template, we are binding the two input elements to two data properties, ‘name’ and ‘number’. Below, the input elements, we have a paragraph element containing the value of the computed property — square.

Another paragraph element contains the value of the method- getSquare()

square — return the square of the ‘number’ ( data property ).

getSquare()- also returns the square of the ‘number’.

Here one might argue that instead of using a computed property we can just use methods for such an operation.

That is considered as a bad practice because computed properties update their value only when an underlying property is updated. Otherwise, the computed properties cache the calculated value and display it when the elements re-render.

On other hand, methods, run each and every time the dom updates, even though there are no updates for the variables used within the method.

You can copy the above code to a component. Run the app in a live server and you can monitor the console.

In the console, you can see that both the mounted and the methods properties fire up whenever the ‘number’ property gets updated. It makes sense because both the method and the computed are associated with the number. But, when you try to enter anything into the name property, you will notice that the method is also fired whereas the computed is not.

In the above gif, — Red indicates methods. Green indicates computed.

Alright then! I hope its clear when to use methods and when to use computed properties. Let me know in the comments below if you still have any more queries.

If the post helped you, then please checkout my Vue JS Fundamentals for Beginners course on Cynohub.

https://cynohub.com/courses/vue-js-fundamentals-course/

See you in the next post.