Vue — computed()

Basic computed

<template>
  <div>
    <p>First name: {{ firstName }}</p>
    <p>Last name: {{ lastName }}</p>
    <p>Full name: {{ fullName }}</p>
    <button @click="changeName">Change</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`
    }
  },
  methods: {
    changeName() {
      this.firstName = 'Jane'
    }
  }
}
</script>

Getter and setter

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    fullName: {
      get() {
        return `${this.firstName} ${this.lastName}`
      },
      set(newValue) {
        const [first, last] = newValue.split(' ')
        this.firstName = first
        this.lastName = last
      }
    }
  }
}
</script>

Computed vs methods

<!-- Computed: cached, only recalculates when deps change -->
<p>{{ fullName }}</p>

<!-- Methods: recalculates on every render -->
<p>{{ getFullName() }}</p>

Computed for filtering

<template>
  <div>
    <input v-model="search" placeholder="Search">
    <ul>
      <li v-for="item in filteredItems" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      search: '',
      items: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Cherry' }
      ]
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item =>
        item.name.toLowerCase().includes(this.search.toLowerCase())
      )
    }
  }
}
</script>

Computed for sorting

<script>
computed: {
  sortedItems() {
    return [...this.items].sort((a, b) =>
      a.name.localeCompare(b.name)
    )
  }
}
</script>

Mini Practice

1. Create a computed property
2. Use getter and setter
3. Filter a list with computed
4. Sort items with computed

Up Next

Continue with Watchers - Side effects.