Updated May 22, 2023
Definition of Vue.js Computed
A computed property is used to make the code easier and more convenient to use. This makes our template code more readable; we use the property to reduce the complex or blotted logic that we write in our template. We can go for inline expression or interpolation if we have simple logic like string concatenation or Boolean expression. Still, for more complex logic, we should opt for a computed property in Vue.js.
Syntax
We need to use the ‘computed’ keyword to make any function act as a computed property to use this property. For more understating, see below.
computed: {
functionName: function () {
//logic will be goes here.
//
}
}In the above syntax, we are using the computed keyword, and inside it, we are defining our function, which needs to be computed. This we are using to write more complex logic, like we need to call a reverse method on the string after successful concatenation of the string. We will see it working in the next section in more detail.
How Computed Property Works in Vue.Js?
As of now, we know that we are using this computed property for more complex logic on the template. We will see one example of when the need for computed property arises. Let’s see one example where we are concatenating two strings and trying to call the uppercase method on it followed by the reverse method(); see one practice example for better understanding.
Example:
<div>
<span>{{msg +' calling other methods as well '.toUpperCase().reverse()}}</span>
</div>In the above example, we are trying to display a message we are trying to convert to the upper case and then call the reverse method. But it is making the template very complex here to look at, and also, it will call the method twice if we have any other too in the js. Also, we are concatenating our message with the static string here. But as we know, the template should be declarative and simple that can be easily readable and stable, but here, by calling multiple functions and performing string concatenation, we are making our templet more complex computed property comes into the picture. This property is declarative, and if we have two variables in which one of the variables depends upon the value of the other, then we should go for this. It makes our template and code more data-driven, easier to maintain, and declarative. Now we will see one example which uses this property see below;
Example:
HTML code:
<div>
<span>{{msg}}</span>
<span>{{computedText}}</span>
</div>Js Code :
computed: {
computedText: function () {
return this.msg.toUpperCase().reverse();
}
}In the above code lines, we have two different files here: one is HTML, and the other is the Js file. Out HTML file contains the template logic, and the Js file contains the computed property logic here. In the html file, we have two different texts on this message that we are showing, and the other one is the computed message that we are trying to display by using the computed property function. We have defined one function called ‘computedText’; this function will perform the remaining logic that we have written previously in the template. As of now, we have moved that into js and made them as a single function performing the logic. We have used the computed keyword to define it; also, we name or function as ‘computedText’, which will be going to return the message in uppercase and reverse order of the original. So this is the above template; we can easily read it, and it is data-driven as well, which makes our code more readable and stable for others. But here, you have noticed that we can simply call a method instead of creating a computed property. like below;
<div> {{method()}} </div>No, because the computed property is cache-based, that means they are only going to calculate the value if there is any change in the reactive dependencies, but this is not the case with the simple method; they are not cache-based, so they will be called every time irrespective of changes have been made or not.
We can also think of using a watch in place of the computed property, but the code will be complex and not easy to maintain. Also, the code for the watch is imperative and sometimes repetitive as well, so we would recommend you use a computed property instead.
Examples of Vue.js Computed
Following are the examples are given below:
Example #1
In this example, we are creating a computed function named as‘computedMethod’ and converting the message to uppercase by using toUpperCasemethod to make the template more easier to read and understand.
HTMl File Code:
<div id="demo">
<span>Showing message : "{{ message }}"</span>
<br />
<span>Showing computed message : "{{ computedMethod }}"</span>
</div>JS File code:
varvm = new Vue({
el: '#demo',
data: {
message: 'Demo for computed property.'
},
computed: {
// this is computed function
//using computed keyword
computedMethod: function () {
//here we are calling methods
//converting it to uppercase
//returing the message from here
return this.message.toUpperCase();
}
}
})Output:
Example #2
In this example, we are using the computed property to convert the string to lowercase by using the toLowerCase method of Vuejs named as‘computedMethod’.
HTMl File Code:
<div id="demo">
<span>Showing message : "{{ message }}"</span>
<br />
<span>Showing computed message : "{{ computedMethod}}"</span>
</div>Js File Code:
varvm = new Vue({
el: '#demo',
data: {
message: 'DEMO FOR COMPUTED PROERTY'
},
computed: {
// this is computed function
//using computed keyword
computedMethod: function () {
//here we are calling methods
//converting it to uppercase
//returing the message from here
return this.message.toLowerCase();
}
}
})Output:
Conclusion
The computed property makes the code data-driven, easy to understand, maintain, and declarative as well. This approach helps to simplify the logic in the template and also improves performance by utilizing caching mechanisms, resulting in faster execution. It is better than a watch. By the use of this, we can make our template more and more declarative and easy for others.
Recommended Articles
We hope that this EDUCBA information on “Vue.js Computed” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
