Why custom directives matter in Vue - Performance Evidence

Performance: Why custom directives matter

MEDIUM IMPACT

Custom directives affect how efficiently DOM manipulations happen and how often the browser must recalculate styles and layouts.

Applying repeated DOM updates for element behavior

Vue

const highlightDirective = {
  mounted(el) {
    el.addEventListener('scroll', () => {
      el.style.backgroundColor = 'yellow';
    });
  }
};

const app = Vue.createApp({});
app.directive('highlight', highlightDirective);

Encapsulates DOM logic in a directive, allowing Vue to optimize updates and avoid unnecessary reflows.

📈 Performance GainReduces repeated layout thrashing by isolating DOM changes

Applying repeated DOM updates for element behavior

Vue

const app = Vue.createApp({
  mounted() {
    const el = this.$refs.myElement;
    el.addEventListener('scroll', () => {
      el.style.backgroundColor = 'yellow';
    });
  }
});

Directly manipulating DOM in lifecycle hooks causes repeated style recalculations and layout thrashing on every event.

📉 Performance CostTriggers multiple reflows and repaints on each scroll event

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Direct DOM manipulation in lifecycle hooks	High (multiple event handlers)	Multiple per event	High due to frequent style changes	[X] Bad
Using custom directives for DOM updates	Controlled and isolated	Single or minimal	Lower paint cost due to fewer style recalculations	[OK] Good

Rendering Pipeline

Custom directives handle DOM updates outside of template re-renders, affecting style calculation and layout stages when they manipulate elements.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckLayout (reflows) caused by frequent or unnecessary DOM changes

Core Web Vital Affected

INP

Custom directives affect how efficiently DOM manipulations happen and how often the browser must recalculate styles and layouts.

Optimization Tips

1Use custom directives to isolate and batch DOM manipulations.

2Avoid direct DOM updates in lifecycle hooks to prevent layout thrashing.

3Monitor layout recalculations in DevTools to catch performance issues.

Performance Quiz - 3 Questions

Why do custom directives improve performance in Vue?

A They isolate DOM updates to reduce unnecessary reflows

B They increase the number of event listeners for better responsiveness

C They force Vue to re-render the entire component on every change

D They add extra CSS styles to speed up rendering

DevTools: Performance

How to check: Record a performance profile while interacting with the element using the directive or direct DOM manipulation. Look for layout thrashing and style recalculations.

What to look for: High number of Layout events and long scripting times indicate poor performance; fewer Layout events show better optimization.