Computed Properties

Data that is "computed" from other data:

const app = Vue.createApp({
  data() {
    return {
      firstname: 'Paul',
      lastname: 'Owens'
    }
  },
  computed: {
    fullName() {
      return this.firstname + ' ' + this.lastname
    }
  }
});

Notice the use of "this" to access the data.

Computed properties are cached based on their dependencies. A computed property will only re-evaluate when some of its dependencies have changed. This means as long as firstname and lastname have not changed, multiple access to the fullName property will immediately return the previously computed result without having to run the function again.

Inside the page, we can use the computed property just like any property:

<div id="app">
  <p>{{ fullName }}</p>
</div>