Mounting components (mount vs shallowMount) in Vue - Performance Comparison

Performance: Mounting components (mount vs shallow)

MEDIUM IMPACT

This affects the initial rendering speed and memory usage during component testing by controlling how deeply components are rendered.

Testing a Vue component with many child components

Vue

import { shallowMount } from '@vue/test-utils';
import ParentComponent from './ParentComponent.vue';

const wrapper = shallowMount(ParentComponent);

shallow renders only the parent component and stubs child components, reducing rendering and memory load.

📈 Performance Gainreduces rendering time by 70-90%; lowers memory usage; faster test execution

Testing a Vue component with many child components

Vue

import { mount } from '@vue/test-utils';
import ParentComponent from './ParentComponent.vue';

const wrapper = mount(ParentComponent);

mount renders the full component tree including all child components, increasing rendering time and memory use.

📉 Performance Costblocks rendering for 50-200ms depending on child complexity; increases memory usage significantly

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
mount	Full DOM tree including children	Multiple reflows proportional to child count	High paint cost due to complex tree	[X] Bad
shallow	Only parent component DOM nodes	Single reflow	Low paint cost	[OK] Good

Rendering Pipeline

mount triggers full component rendering including child components, causing more style calculations, layout, and paint steps. shallow skips child components, reducing these steps.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckLayout and Paint stages due to deeper DOM tree from full mount

Core Web Vital Affected

LCP

This affects the initial rendering speed and memory usage during component testing by controlling how deeply components are rendered.

Optimization Tips

1Use shallow to speed up tests by avoiding full child component rendering.

2Full mount increases DOM nodes and triggers more layout and paint operations.

3Shallow mounting improves LCP by reducing rendering complexity during tests.

Performance Quiz - 3 Questions

Which mounting method renders child components fully, increasing test rendering time?

A shallow

B mount

C render

D attach

DevTools: Performance

How to check: Record a performance profile while running tests with mount and shallow. Compare flame charts for rendering time and layout events.

What to look for: Look for longer scripting and rendering times with mount. Fewer layout and paint events indicate better performance with shallow.