How to Optimize Vue App Performance: Tips and Examples

To optimize a Vue app's performance, use lazy loading for components, computed properties to cache expensive calculations, and avoid unnecessary reactive data updates. Also, use v-once for static content and keep-alive to cache component state.

Syntax

Here are key Vue features to optimize performance:

• Lazy loading components: Load components only when needed using dynamic import().
• Computed properties: Cache results of expensive calculations and update only when dependencies change.
• v-once directive: Render static content once and skip future updates.
• keep-alive component: Cache inactive component state to avoid re-rendering.

vue

<!-- Lazy loading a component -->
const AsyncComponent = () => import('./MyComponent.vue');

// Computed property example
export default {
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('');
    }
  }
}

<!-- Using v-once -->
<p v-once>This text will not update.</p>

<!-- Using keep-alive -->
<keep-alive>
  <component :is="currentView" />
</keep-alive>

Example

This example shows lazy loading a component and using a computed property to optimize rendering.

vue

<template>
  <div>
    <button @click="show = !show">Toggle Component</button>
    <p>Reversed message: {{ reversedMessage }}</p>
    <component v-if="show" :is="AsyncComponent" />
  </div>
</template>

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

const show = ref(false);
const message = ref('Hello Vue');

const reversedMessage = computed(() => {
  console.log('Computing reversed message');
  return message.value.split('').reverse().join('');
});

const AsyncComponent = () => import('./LazyComponent.vue');
</script>

Output

<button>Toggle Component</button>
<p>Reversed message: euV olleH</p>
<!-- LazyComponent appears only when toggled -->

Common Pitfalls

Common mistakes that hurt Vue app performance:

• Updating reactive data too often, causing unnecessary re-renders.
• Not using computed properties, leading to repeated expensive calculations.
• Loading all components upfront instead of lazy loading.
• Not caching components with keep-alive when switching views.

vue

<!-- Wrong: expensive calculation in template -->
<p>{{ message.split('').reverse().join('') }}</p>

<!-- Right: use computed property -->
<p>{{ reversedMessage }}</p>

Quick Reference

• Lazy load components: Use dynamic import() to reduce initial load.
• Computed properties: Cache results to avoid repeated work.
• v-once: Render static content once.
• keep-alive: Cache inactive components to preserve state.
• Avoid unnecessary reactive updates: Update only when needed.

Key Takeaways

Use lazy loading to reduce initial bundle size and load components on demand.

Leverage computed properties to cache expensive calculations and avoid repeated work.

Apply v-once for static content to skip unnecessary re-renders.

Use keep-alive to cache component state and improve navigation speed.

Minimize reactive data updates to prevent excessive component re-rendering.