Ten Vue.js Performance Optimization Techniques

Vue is a progressive JavaScript framework for building user interfaces. It is lightweight, efficient, supports two‑way data binding, and is widely used in cross‑platform mobile development. This article presents ten practical techniques to achieve extreme performance optimization in Vue.js applications.

1. Add a unique key to items in v‑for and avoid using v‑if on the same element. Using a stable identifier (e.g., an id) instead of the array index allows Vue to reuse existing DOM nodes and only re‑render the newly inserted item.

var list = [
  { id: 1, name: 'test1' },
  { id: 2, name: 'test2' },
  { id: 3, name: 'test3' }
]

<div v-for="(item, index) in list" :key="index">{{item.name}}</div>

When the list is extended with a fourth element, using the index as key causes Vue to re‑render three items instead of only the new one. Replacing the index with a stable id solves the problem.

var list = [
  { id: 1, name: 'test1' },
  { id: 2, name: 'test2' },
  { id: 3, name: 'test3' },
  { id: 4, name: 'I am the newly added item' }
]

2. Optimize long lists. Freeze data that never changes with Object.freeze() to skip Vue’s reactivity system and reduce component initialization time.

export default {
  data: () => ({ users: {} }),
  async created() {
    const users = await axios.get('/api/users')
    this.users = Object.freeze(users)
  }
}

3. Define data as a function. In components, data must return a fresh object for each instance; otherwise, all instances would share the same reference.

export default {
  data() {
    return { name: 'bartonwang' }
  }
}

4. Component lazy loading. Use a lazy‑load component (e.g., @xunlei/vue-lazy-component) to split large bundles and load components only when they become visible.

import { component as VueLazyComponent } from '@xunlei/vue-lazy-component'

export default {
  components: { 'vue-lazy-component': VueLazyComponent }
}

<vue-lazy-component :timeout="5000" tagName="div">
  <child1 slot="skeleton" />
  <child2 />
  <child3 />
</vue-lazy-component>

5. Keep non‑reactive data out of data . Large static objects should be stored directly on the Vue instance to avoid unnecessary getter/setter overhead.

6. Event delegation for v‑for elements. Attach a single listener to a parent element instead of binding a handler to each child, reducing memory usage and improving performance.

<!-- without delegation -->
<div>
  <span v-for="(item, index) of 100000" :key="index" @click="handleClick">{{item}}</span>
</div>

<!-- with delegation -->
<div @click="handleClick">
  <span v-for="(item, index) of 100000" :key="index">{{item}}</span>
</div>

7. Functional components. Stateless, render‑only components declared with functional are lightweight and provide better rendering performance.

export default {
  functional: true,
  render(h, ctx) {
    return h('div', ctx.props.message)
  }
}

8. Provide / inject for deep component communication. Use provide in a parent to expose data and inject in any descendant to consume it, avoiding prop‑drilling.

// parent.vue
provide() { return { keyName: this.changeValue } }

// grandchild.vue
inject: ['keyName']
created() { console.log(this.keyName) }

These techniques collectively improve Vue.js application speed, reduce memory consumption, and simplify code maintenance.