How to optimize Vue performance? | Vue.js Interview Questions

What You'll Learn

Component optimization
Reactivity optimization
Bundle optimization

Lazy Load Components

code.jsJavaScript

const HeavyComponent = defineAsyncComponent(() =>
  import('./HeavyComponent.vue')
)

v-once for Static Content

code.txtVUE

<template>
  <div v-once>
    {{ staticContent }}
  </div>
</template>

v-memo for Expensive Renders

code.txtVUE

<template>
  <div v-for="item in list" :key="item.id" v-memo="[item.id === selected]">
    <p>{{ item.name }}</p>
  </div>
</template>

Computed vs Methods

code.jsJavaScript

// Good - cached
const filtered = computed(() =>
  items.value.filter(i => i.active)
)

// Bad - runs every render
function filtered() {
  return items.value.filter(i => i.active)
}

shallowRef for Large Data

code.jsJavaScript

// Don't make large objects deeply reactive
const bigData = shallowRef(largeObject)

Virtual Scrolling

code.txtVUE

<script setup>
import { RecycleScroller } from 'vue-virtual-scroller'
</script>

<template>
  <RecycleScroller
    :items="largeList"
    :item-size="50"
    v-slot="{ item }"
  >
    <div>{{ item.name }}</div>
  </RecycleScroller>
</template>