Vue js is becoming more and more popular every day. It has a community of great developers. Also, you can develop almost any types of a web application with Vue. Besides, The Vue.js is an open-source progressive JavaScript framework for building user interfaces. Vue can also function as a web application framework capable of powering advanced single-page applications. In this article, you will learn about Vuejs computed properties vs methods. Also, where should you use methods and where should you use computed properties.
Vuejs Computed Properties VS Methods
Firstly, I expect you know the basics of Vue and want’s to learn the differences between computed property and methods. So, we will discuss with clear and real-life examples.
You write the computed properties and methods almost in the same way. Let’s see an example and then we will explain it more.
[codepen_embed height=”432″ theme_id=”0″ slug_hash=”GOxPbN” default_tab=”js,result” user=”Hujjat”]See the Pen <a href=’https://codepen.io/Hujjat/pen/GOxPbN/’>GOxPbN</a> by Hujjat Nazari (<a href=’https://codepen.io/Hujjat’>@Hujjat</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]
In the above example, we have a collection of tasks. Then, we display them based on completed and incompleted tasks. As you can see, we have once computed property and one method. They do almost the same thing but opposite to each other.
Return completed tasks:
computed: {
completedTasks() {
return this.tasks.filter(task => task.completed);
}
}
Return Incompleted tasks:
methods: {
InCompletedTasks() {
return this.tasks.filter(task => !task.completed);
}
}
Note: As you can see, we could use computed property or methods for both. Instead, we put them in two ways so that you can understand that, what we can do with methods can be done with computed properties as well.
So, there are some significant difference and usage you should consider while using them.
Computed Properties
In a nutshell, computed properties are called computed value as well. It means, they update and can be changed anytime. Also, it caches the data until it changes. When the Vue is instantiated, computed properties are converted into a property. Therefore, you reference a computed property just like you would a data property.
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// a computed getter
reversedMessage: function () {
// `this` points to the vm instance
return this.message.split('').reverse().join('')
}
}
})
You can use it like this.
<p>Original message: "{{ message }}" </p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>As you can see, the reverse message is not written like function. It’s just like a keyword. Additionally, you can’t pass a value to a computed property despite the fact that it’s like function.
Methods
You probably work with function a lot. Methods are the same as function and work the same way. Besides, a method does nothing unless you call it. Also, like all javascript functions, it accepts parameters and will be re-evaluated every time it’s called. After that, they can’t cache values. Additionally, you must use methods when you want to pass a value to modify it.
Example:
[codepen_embed height=”305″ theme_id=”0″ slug_hash=”yPjjyg” default_tab=”html,result” user=”Hujjat”]See the Pen <a href=’https://codepen.io/Hujjat/pen/yPjjyg/’>Vuejs example for tutorial</a> by Hujjat Nazari (<a href=’https://codepen.io/Hujjat’>@Hujjat</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]
As you can see. We can call it like a function and pass value. Then, you can change it or add something.
In a nutshell, if you want to pass value, methods are good. Otherwise, computed properties are better for cache and speed.
Conclusion
I hope the Vuejs computed properties VS methods compression has been informative for you. If you have any questions or suggestions, feel free to comment below. Besides, you can join our forum and ask questions frequently.
