Directive with arguments and modifiers in Vue - Performance & Optimization

Performance: Directive with arguments and modifiers

MEDIUM IMPACT

This affects how Vue processes directives during rendering, impacting the number of DOM updates and reflows triggered by directive logic.

Applying a custom directive with multiple modifiers and dynamic arguments to update DOM elements

Vue

app.directive('focus', {
  mounted(el, binding) {
    const { arg, modifiers } = binding;
    if (arg === 'input' && modifiers.lazy) {
      const handler = () => el.focus();
      el.addEventListener('change', handler, { once: true });
    } else if (arg === 'button' && modifiers.immediate) {
      el.focus();
    }
  }
});

This version uses event listener options to avoid multiple bindings and limits focus calls, reducing unnecessary DOM updates.

📈 Performance Gainreduces event listeners and reflows, improving INP and responsiveness

Applying a custom directive with multiple modifiers and dynamic arguments to update DOM elements

Vue

app.directive('focus', {
  mounted(el, binding) {
    if (binding.arg === 'input' && binding.modifiers.lazy) {
      el.addEventListener('change', () => {
        el.focus();
      });
    } else if (binding.arg === 'button' && binding.modifiers.immediate) {
      el.focus();
    }
  }
});

This directive checks multiple conditions and attaches event listeners inside the directive, causing extra event bindings and potential multiple reflows on updates.

📉 Performance Costtriggers multiple event listeners and reflows per element, increasing INP latency

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Directive with multiple modifiers and dynamic arguments causing repeated event listeners	Multiple event listeners per element	Multiple reflows per event	High paint cost due to frequent focus calls	[X] Bad
Directive with optimized event listener usage and conditional logic	Single event listener per element	Single reflow per event	Lower paint cost with limited focus calls	[OK] Good

Rendering Pipeline

Vue processes directives during the patch phase, applying argument and modifier logic to update the DOM. Complex logic can cause multiple layout recalculations and event bindings.

→JavaScript Execution

→Layout

→Paint

⚠️ BottleneckLayout stage due to multiple DOM updates triggered by directive logic

Core Web Vital Affected

INP

This affects how Vue processes directives during rendering, impacting the number of DOM updates and reflows triggered by directive logic.

Optimization Tips

1Avoid attaching multiple event listeners inside directives with modifiers.

2Use event listener options like { once: true } to limit bindings.

3Batch DOM updates inside directives to reduce layout thrashing.

Performance Quiz - 3 Questions

What is a common performance issue when using directives with multiple modifiers and arguments in Vue?

A Attaching multiple event listeners causing repeated reflows

B Reducing bundle size significantly

C Improving LCP by lazy loading directives

D Preventing CLS by fixing layout shifts

DevTools: Performance

How to check: Record a performance profile while interacting with elements using the directive. Look for scripting time and layout events triggered by directive handlers.

What to look for: High scripting time and frequent layout recalculations indicate inefficient directive logic causing poor INP.