Dependency injection patterns in Vue - Performance & Optimization

Performance: Dependency injection patterns

MEDIUM IMPACT

This affects the initial load time and runtime responsiveness by controlling how dependencies are created and shared in Vue components.

Sharing a service instance across multiple components

Vue

import { provide, inject, reactive } from 'vue';

// In a parent or root component
export default {
  setup() {
    const service = reactive({ count: 0 });
    provide('service', service);
    return {};
  }
}

// In child components
export default {
  setup() {
    const service = inject('service');
    return { service };
  }
}

Provides a single shared reactive service instance to all child components, reducing memory and improving state consistency.

📈 Performance GainSaves memory and improves INP by avoiding redundant reactive object creation.

Sharing a service instance across multiple components

Vue

import { reactive } from 'vue';

export default {
  setup() {
    const service = reactive({ count: 0 });
    // Each component creates its own service instance
    return { service };
  }
}

Each component creates a new service instance causing redundant memory use and inconsistent state.

📉 Performance CostIncreases memory usage and can cause slower interaction responsiveness due to duplicated state management.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Creating new service instance per component	None	0	Low but repeated JS execution	[X] Bad
Using provide/inject to share service instance	None	0	Low JS execution once	[OK] Good

Rendering Pipeline

Dependency injection affects the setup phase of Vue components, influencing how reactive dependencies are created and shared before rendering.

→JavaScript Execution

→Style Calculation

→Layout

→Paint

⚠️ BottleneckJavaScript Execution during component setup if dependencies are created repeatedly or inefficiently.

Core Web Vital Affected

INP

This affects the initial load time and runtime responsiveness by controlling how dependencies are created and shared in Vue components.

Optimization Tips

1Use provide/inject to share dependencies and avoid redundant creation.

2Initialize heavy dependencies once to prevent blocking rendering.

3Avoid creating reactive objects repeatedly in multiple components.

Performance Quiz - 3 Questions

What is a performance benefit of using provide/inject for dependency injection in Vue?

A It shares a single instance to avoid repeated heavy initialization.

B It forces each component to create its own instance for isolation.

C It delays rendering until all dependencies are fetched from the server.

D It automatically caches DOM nodes to reduce reflows.

DevTools: Performance

How to check: Record a performance profile while loading the page and interacting with components. Look for long scripting tasks during component setup.

What to look for: Check if heavy initialization runs multiple times or if shared dependencies reduce scripting time and improve interaction responsiveness.