Optimising Performance with the Composition API: Techniques for Improving Performance in Vue 3 Applications

Vue 3’s Composition API has been a game-changer, offering flexibility and improved maintainability. But are you using it efficiently? Even clean-looking code can slow down an app if you’re not careful.

Let’s explore some techniques to optimise performance when using the Composition API, with examples.

1. Lazy-Loading Expensive Computations

Computed properties are great, but they can be expensive if they run unnecessarily. If you don’t need a computed value immediately, consider using a function instead. This might seem contrary to the expected ‘use computed for everything’ approach but learning and understanding that computed properties are refreshed on every DOM update you will soon see why – just add the dreaded console.log and see how often it runs…

Inefficient Computation

<script setup>
import { computed } from 'vue'

const items = [/* large array */]
const expensiveComputed = computed(() => {
  console.log('Expensive computation running!')
  return items.map(item => item * 2)
})
</script>

This runs on every component re-render, even if it’s not being used.

Optimised Approach

Use a function instead so it only runs when explicitly called:

<script setup>
const items = [/* large array */]
const getExpensiveComputed = () => {
  console.log('Running only when needed!')
  return items.map(item => item * 2)
}
</script>

This prevents unnecessary recalculations, improving performance.

2. Use shallowRef for Large Reactive Objects

Vue’s reactive() function deeply tracks changes, which can be overkill for large objects. If you only need shallow tracking, use shallowRef().

Inefficient: Using reactive() for Large Objects

<script setup>
import { reactive } from 'vue'

const largeObject = reactive({
  data: { /* huge dataset */ }
})
</script>

Every tiny change in data triggers reactivity—even if it’s deep inside.

Optimized: Use shallowRef()

<script setup>
import { shallowRef } from 'vue'

const largeObject = shallowRef({ data: { /* huge dataset */ } })
</script>

Now Vue only tracks the reference, not deep changes, making updates faster.

3. Debounce or Throttle Expensive Watchers

Watches are powerful, but if they react to high-frequency changes (e.g., input events), they can slow down your app. Use debouncing or throttling to limit execution.

Inefficient Watcher

<script setup>
import { ref, watch } from 'vue'

const searchQuery = ref('')
watch(searchQuery, async (newQuery) => {
  await fetchData(newQuery) // Fires too often!
})
</script>

This makes a network request every time the user types a letter—bad for performance.

Optimised: Debounce the Watcher

<script setup>
import { ref, watch } from 'vue'
import { debounce } from 'lodash'

const searchQuery = ref('')
watch(searchQuery, debounce(async (newQuery) => {
  await fetchData(newQuery)
}, 300)) // Runs only once per 300ms
</script>

This reduces unnecessary API calls, making the app more efficient.

4. Avoid Overusing Reactive State

Not every piece of data needs to be reactive. Unnecessary reactivity can slow things down.

Inefficient: Making Everything Reactive

<script setup>
import { ref } from 'vue'

const firstName = ref('John')
const lastName = ref('Doe')
const fullName = computed(() => `${firstName.value} ${lastName.value}`)
</script>

If fullName is not reactive, it doesn’t need computed().

Optimized: Use Plain Variables

<script setup>
const firstName = 'John'
const lastName = 'Doe'
const fullName = `${firstName} ${lastName}`
</script>

This improves performance by avoiding unnecessary reactivity.

Another approach could be to use a watcher but again this can be expensive … but when should you use a watcher?

Corrected Approach Using a Watcher

<script setup>
import { ref, watch } from 'vue'

const firstName = ref('John')
const lastName = ref('Doe')
const fullName = ref(`${firstName.value} ${lastName.value}`)

watch([firstName, lastName], ([newFirst, newLast]) => {
  fullName.value = `${newFirst} ${newLast}`
})
</script>

Why Use a Watcher?

• A watcher allows you to explicitly control when fullName updates.

• Unlike computed properties, which are reactive, fullName is now just a plain ref that updates only when needed.

Use a watch() if you need to perform side effects when values change (e.g., logging, API calls), otherwise, stick with computed().

5. Use defineAsyncComponent() for Large Components

If you have large components that aren’t needed immediately, load them asynchronously.

Inefficient: Direct Import of Large Components

<script setup>
import LargeComponent from '@/components/LargeComponent.vue'
</script>

<template>
  <LargeComponent />
</template>

This loads the component even if the user never sees it.

Optimised: Lazy-Load with defineAsyncComponent()

<script setup>
import { defineAsyncComponent } from 'vue'

const LargeComponent = defineAsyncComponent(() => import('@/components/LargeComponent.vue'))
</script>

<template>
  <Suspense>
    <LargeComponent />
    <template #fallback>Loading...</template>
  </Suspense>
</template>

This loads the component only when needed, improving initial page load speed.

see: https://vuejs.org/guide/components/async.html and https://vuejs.org/guide/built-ins/suspense.html

Final Thoughts

Vue 3’s Composition API is very powerful, but careless usage can lead to unnecessary performance issues. Keep these key points in mind:

✅ Lazy-load expensive computations

✅ Use shallowRef() for large objects

✅ Debounce high-frequency watchers

✅ Avoid unnecessary reactivity

✅ Lazy-load large components

By applying these optimisations, your Vue 3 apps will be faster, more efficient, and smoother for users. 🚀

Have any other Vue 3 performance tricks? Share them in the comments! 🔥