Vue.js Computed Properties and Methods
As I continue into working with Vue.js I have come to enjoy working with it more and more. With my previous experience with vanilla JS and React, many things in Vue have seemed easier to pick up than I was expecting. However, like anything to do with software development, there are always sticking points and places where I feel I don’t have a great grasp on. One of these things is computed properties and methods. What exactly are they and how do they differ from each other? So let’s take a more in depth look at each.
What Is A Computed Property?
According to the official Vue documentation computed property is used to declaratively describe a value that depends on other values. When you data-bind to a computed property inside the template, Vue know when to update the DOM when any of the value depended upon by the computed property has changed.
Sarah Drasner describes it in a much simpler way. She says “computed properties allow us to define a property that is used the same way as data, but can also have some custom logic that is cached based on its dependencies. You can consider computed porperties [as] another view into your data. Side note, Sarah Drasner’s courses and articles should be at the top of your list for nearly anything Vue related.
Computed Properties all you to complete a variety of calculations from simple, calculations to complex calculations. For example, computed properties are a great way to “clean up” your template. Consider the following:
// template<div>
{{ words.filter(word => word.length >= 6 && word.length <= 9) }}
</div>
This takes in an array of words and displays only words that are greater than or equal to 6 letters long and less than or equal to 9 letters long. This isn’t terrible as it’s a fairly simple example but imagine your logic needs to be much more complicated. That would make your template much less readable. A great solution is to move the code into a computed property.
<div>
{{ filteredWords }}
</div>
<script>
... data: {
words: [template, longer, simple, declarative, second, first, made]
},computed: {
filteredWords() {
return this.words.filter(word => word.length >= 6 && word.length <= 9)
}
}
Both of these things achieve the exact same thing but our template is much more readable. Another advantage is that computed properties are cached based on their reactive dependencies. If those reactive dependencies don’t change, the computer property does not need to be executed again. In this example that means that filteredWords does not need to be re-executed unless the words array changes in the instance’s data. This leads to more performant code as it reduces the number of calculations run. For more information on reactive dependencies see Vue’s documentation.
What Is a Method?
Methods are very similar to computed properties. And again, Sarah Drasner explains what they are very well in plain English. She says “These are exactly what they sound like they might be. They’re functions that hang off of an object-typically the Vue instance itself or a Vue component.” Methods, like computed properties, allow you to abstract logic out of the template. In fact, our example above can be used with a method instead of a computed property. The end result will be the same thing but there are differences.
<div>
{{ filteredWords }}
</div><script>
...data: {
words: [template, longer, simple, declarative, second, first, made]
},methods: {
filteredWords() {
return this.words.filter(word => word.length >= 6 && word.length <= 9)
}
}
This will achieve the same result. A list of filtered words will be displayed in the div that are greater than or equal to 6 letters long and less than or equal to 9 letters long. The difference in this example to the computed property above? This method will run every single time the component needs to be re-rendered, even in the array of words in the data has not changed. You can see how using a computed property is more beneficial than a method, especially if this logic is exceedingly complex and/or needed to run many times. This brings us to what are the differences between computed properties and methods.
The Differences Between Computed Properties and Methods
One of the most important distinctions, one that we have already covered, is computed properties’ ability to be cached if is reactive dependencies has not changed. Methods are not cached and therefore must be executed every time. Other differences include:
- Methods can accept arguments while computed properties cannot. So if you need to pass one or more arguments to your logic/function, a method is your best bet.
- Methods are useful when DOM events are registered such as on click, hover, submit, etc. If a DOM event triggers it, a method is the best option.
- Methods have getter/setter functionality by default. Computed properties, by default only have getter functionality.
- Computed properties are best when somehow manipulating data from your instance (i.e. the words array in our example above)
Understanding when and how to use methods and computed properties are essential in Vue. Using them in the correct fashion can make your code more performant and clean. Hopefully this explanation gave you a better insight into using them both moving forward! For even more detailed information into both (and watchers) I cannot recommend Sarah Drasner’s article on the subject more.
