# Computed Properties

Computed properties, convenient for simple operations, 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. A computed property will only re-evaluate when some of its reactive dependencies have changed.

Updating a large amount of information while a user is typing, such as filtering a list
Gathering information from your Vuex store
Form validation
Data visualizations that change depending on what the user needs to see

# Input:

<template>
  <p>My Full name is: {{ fullName }}</p>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'Joe',
      lastName: 'Exotic'
    }
  },
  computed: {
    fullName: function() {
      return this.firstName + ' ' + this.lastName
    }
  }
}
</script>
 
        Copied!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# Output:

My Full name is: Joe Exotic

See the official Vue.js doc

← Interpolation Watch →