What made the Computed Property favourable for existence?
To understand this let's look at the ways things used to work before computed properties by defining a problem and solving it in multiple ways.
Problem: Consider that there are a few places in your VueJS template where you want to display the reverse of a string, easy right!!!
The extremely obvious(beginner) ways to do so would have been one of the below:
Inline Logic:
<div id="example"> <p>{{message}}</p> <p> {{ message.split('').reverse().join('') }}</p> <div id=“in-here> <p> {{ message.split('').reverse().join('') }}</p> </div> </div>What problem this approach solved?
Got you the end result without having to figure out better and efficient ways :)
What’s wrong with this approach?
- We’ve driven our code far away from the DRY(Don’t Repeat Yourself) Principle.
- Our code looks worse and is no longer declarative.
Methods:
<div id="example"> <p>{{message}}</p> <div id=“in-here> <p> {{ reverseMessage() }}</p> </div> </div> methods: { reverseMessage: function () { return this.message.split('').reverse().join('') } }What problem this approach solved?
- Our code looks clean, simple and declarative.
- Follows DRY Principle.
What’s wrong with this approach?
There is no reactive caching, which means that every time our page re-renders, our method will be invoked and that property will be re-evaluated, which is useful in some cases but must be used wisely as it can be a lot more expensive than necessary.
When To Use This Approach?
In cases where you do not want caching.
What's Cache? Why do we need caching?
Technically, a cache is any temporary storage location for copies of files or data, so that they can be accessed more quickly.
Computed Properties:
What is a computed property?
In layman's terms we can state that a computed property is a differently evaluated view of a property.
What problem does it solve?
We’ll get the reactive caching benefit, consequentially our property will only re-evaluate when some of its reactive dependencies have changed. In every other kind of access it’ll return the previously computed result.
When To Use This Approach?
In cases where you want caching.
But How? Let’s See.
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
computed: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
Note: reversedMessage is the computed property and thats why needs not to be defined in the data Object or Function, this kind of relation semantic is referred to as declarative relationship.
Benefits of computed property:
- As long as “message”(i.e. reactive dependent that can be changed) has not changed, multiple access to the “reversedMessage” (i.e. computed property) will immediately return the previously computed result without having to run the function again.
- Used Cleverly, this can then reduce the total runtime overhead, as the evaluations will take place “Consciously” :)
Conclusion
- A computed property is differently evaluated view of a property.
- The preferred use case of a computed property can be for replacement of an expensive method(s).
Thank you for reading till the end, you're a genius. Never stop learning.