Back to Snippets
Performance
Complex

Offload CPU Work to a Web Worker (Progress + Cancel)

Keep the UI responsive by moving CPU-heavy work off the main thread using a Web Worker. This snippet creates an inline worker (Blob URL), streams progress updates, and supports cancelation by terminating the worker on demand and during unmount. Use cases: Large data transforms, report generation, client-side analytics, parsing/formatting.

Vue 3
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166

Related Snippets

Performance
Complex

Performance Optimization with Memoization

Implement memoization for expensive computations to optimize component performance in enterprise applications. ...

<script setup lang="ts">
  import { ref, computed, onMounted } from 'vue';
  
  // Typed data type
  interface Product {
    id: number;
    name: string;
    price: number;
Performance
Complex

Reduce Tracking Overhead for Large Data (Vue shallowRef/markRaw + React useRef)

Improve runtime performance by avoiding unnecessary deep tracking of large immutable datasets and by keeping third-p...

<script setup lang="ts">
  import { computed, markRaw, shallowRef } from 'vue';
  
  interface Row {
    id: number;
    name: string;
    amount: number;
  }
Performance
Complex

Subtree Memoization to Reduce Re-Renders (Vue v-memo + React.memo)

Skip updating expensive UI subtrees when their inputs haven't changed. Vue's v-memo lets you memoize a subtree based...

<script setup lang="ts">
  import { ref } from 'vue';
  
  interface Item {
    id: number;
    label: string;
  }