A short introduction to Vue.js computed properties

/ #Vue.js

Vue.js computed properties helps you to make computations and changes to your data variables.

Can't I just use expressions in the templates?

Well, you can. But you shouldn't (most of the times). Inside the templated you're limited to just one expression and in addition to that the template is made for showing the data, not working with it. That is what the computed properties are for. Here is a short example.

        <b>First name: </b>{{ first_name }}<br>
        <b>Last name: </b>{{ first_name }}<br><br>
        {{ full_name_message }}

export default {
    data() {
        return {
            first_name: 'John',
            last_name: 'Doe'
    computed: {
        full_name_message: function() { // Function for generating/computing the message
            const full_name = this.first_name + ' ' + this.last_name // Combine the first_name and the last name
            return 'Your full name is ' + full_name + '. It is ' + full_name.length + ' characters long!' // Return the message with full name and the number of characters

Isn't it just the same as a method?

A computed property might look like a method and indeed they are quite similar. The only difference is that a method must be called and not just referenced. A computed property is also cached, meaning that they will update when a reactive source has been updated. So if you reference the computed property multiple times it will re use the cached value, but if you do the same with a method it will do the calculation over and over again.

Other Vue.js tutorials

-A short introduction to Vue.js watchers
-Introduction to Vue.js props
-Vue.js filters


No comments yet...

Add comment


Subscribe to my weekly newsletter. One time per week I will send you a short summary of the tutorials I have posted in the past week.