Optimizing Performance with Computed Properties

Let’s take a short break from talking about directives and turn our attention to something calling computed properties. Computed properties are kind of similar to methods, but bring something powerful to the table: caching! Let’s dive into an example, and I will tell you what you need to know as we go along.

I have prepared an example which has a counter that we can increment by clicking a button. My full name is also output by invoking a method which concatenates my first and last name with a space in-between. I have added an alert to the method just so we can see when it gets called. Running the code will show an alert, which is what we would expect, because the name needs to be assembled initially. What’s interesting is that if I click the button to increase the number, we will see another alert. This is because methods are invoked every time Vue.js re-renders the template. As you can probably imagine, this is not very efficient in this case, because the getFullName method has nothing to do with the counter, and therefore it is a waste of computations to invoke the method again, since the result will be exactly the same.

The solution to this problem is computed properties. Computed properties are functions too, so we can simply rename the methods property to computed in order to turn our method into a computed property.

computed: {
  getFullName: function() {
    ...
  }
}

With computed properties, the Vue instance is also bound to the this keyword within the function. Computed properties are in the same scope as data properties and methods, so we can access them in the same way from within the template. In this example I have to remove the parenthesis because computed properties are used in the same way as normal data properties. If I had left out the parenthesis when using a method, then I would not need to change anything. I will also remove the “get” prefix from the computed property, because we want to use it as if it were a normal data property.

<p>{{ fullName }}</p>

computed: {
  fullName: function() {
    ...
  }
}

Let’s see what difference it makes. We still get the first alert as we would expect, but notice what happens when I click the button. No alerts anymore! This is because Vue.js caches computed properties based on their dependencies, meaning that Vue.js is aware of which dependencies our computed property relies on. A computed property will therefore only be re-evaluated when one of its dependencies change. In this example, the full name is assembled on the initial render. When I click the button, Vue.js is intelligent enough to realize that none of the dependencies of the computed property have changed, and therefore it uses the cached value. This means that the function is not invoked again unless a dependency changes, something that is much more efficient than the first approach that we saw which used a method.

Let’s add a button which changes the name.

<button v-on:click="changeName">Change Name</button>

And a simple event listener.

methods: {
  changeName: function() {
    this.firstName = 'Mark';
    this.lastName = 'Gonzales';
  }
}

Perhaps you already figured out what happens when I click the button, but let’s see. Nothing still happens when I increment the counter, but when I click the button the change the name, we see an alert. As I said before, this is because Vue.js recognizes that one or more of the dependencies of the fullName computed property have changed. Pretty cool, right? So Vue.js automatically recognizes when it can used the cached value and when it is time to run the function again. This improves performance, especially if the code is computationally expensive.

Using computed properties is also a performance improvement when you need to perform the same logic multiple times within the template. Perhaps we want to output the full name multiple places on the page, so let’s do that.

<p>{{ fullName }}</p>

Running the code, we still only get one alert, because the second time the name is to be output, Vue.js uses the cached result. The same applies when clicking the button to change the name – also only one alert.

Had we used a method to assemble the full name, the method would be invoked two times, or as many times as the full name is used. This could quickly become expensive in terms of performance if the method did something a little more resource intensive than in this example!

Also note that if I click the button multiple times, we do not see additional alerts, because Vue.js understands that the values of the data have not been changed.

Note that you can also bind computed properties to elements and do other things as you would do with normal data properties, so within the template, it is overall transparent to you that you are indeed using a computed property.

Generally speaking, it is good practice to use computed properties unless you have a reason for doing otherwise. We have seen how we can use computed properties to optimize the rendering of our page, something that is especially useful if you have some resource intensive code that you don’t want to be executed unnecessarily.