Computed properties

In this section, we'll be looking at computed properties within our Vue instance. This allows us to create small, declarative functions that return a singular value based on items inside of our data model. Why is this important? Well, if we kept all of our logic inside of our templates, both our team members and our future self would have to do more work to understand what our application does.

Therefore, we can use computed properties to vastly simplify our templates and create variables that we can reference instead of the logic itself. It goes further than an abstraction; computed properties are cached and will not be recalculated unless a dependency has changed.

Let's create a simple project to see this in action:

# Create a new Vue.js project
$ vue init webpack-simple computed 

# Change directory
$ cd computed

# Install dependencies
$ npm install

# Run application
$ npm run dev

Interpolation is powerful; for example, inside of our Vue.js templates we can take a string (for example, firstName) and reverse this using the reverse() method:

<h1>{{  firstName.split('').reverse().join('') }}</h1>

We'll now be showing a reversed version of our firstName, so Paul would become luaP. The issue with this is that it's not very practical to keep logic inside of our templates. If we'd like to reverse multiple fields, we have to then add another split(), reverse(), and join() on each property. To make this more declarative, we can use computed properties.

Inside of App.vue, we can add a new computed object, that contains a function named reversedName; this takes our logic for reversing our string and allows us to abstract this into a function containing logic that would otherwise pollute the template:

<template>
 <h1>Name: {{ reversedName }}</h1>
</template>

<script>
export default {
 data() {
  return {
   firstName: 'Paul'
  }
 },
 computed: {
  reversedName() {
   return this.firstName.split('').reverse().join('')
  }
 }
}
</script>

We could then see more information about our computed properties within Vue.js devtools:

In our simple example, it's important to realize that, while we could make this a method, there are reasons why we should keep this as a computed property. Computed properties are cached and are not re-rendered unless their dependency changes, which is especially important if we have a larger data-driven application.