Skip to content
This repository was archived by the owner on Jul 19, 2025. It is now read-only.

Commit 0196e1a

Browse files
edison1105edison1105
authored
perf(runtime-vapor): optimize setDOMProp on static tag + key (#294)
1 parent 842f94c commit 0196e1a

File tree

10 files changed

+483
-146
lines changed

10 files changed

+483
-146
lines changed

‎packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -186,7 +186,7 @@ export function render(_ctx) {
186186
_delegate(n0, "click", () => _ctx.handleClick)
187187
_setInheritAttrs(["id"])
188188
_renderEffect(() => _setText(n0, _ctx.count, "foo", _ctx.count, "foo", _ctx.count))
189-
_renderEffect(() => _setDOMProp(n0, "id", _ctx.count, true))
189+
_renderEffect(() => _setDOMProp(n0, "id", _ctx.count))
190190
return n0
191191
}"
192192
`;

‎packages/compiler-vapor/__tests__/transforms/__snapshots__/vBind.spec.ts.snap‎

Lines changed: 218 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,19 @@ const t0 = _template("<div></div>")
77
export function render(_ctx) {
88
const n0 = t0()
99
_setInheritAttrs(["foo-bar"])
10-
_renderEffect(() => _setAttr(n0, "foo-bar", _ctx.id, true))
10+
_renderEffect(() => _setAttr(n0, "foo-bar", _ctx.id))
11+
return n0
12+
}"
13+
`;
14+
15+
exports[`compiler v-bind > .attr modifier w/ innerHTML 1`] = `
16+
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setAttr as _setAttr, template as _template } from 'vue/vapor';
17+
const t0 = _template("<div></div>")
18+
19+
export function render(_ctx) {
20+
const n0 = t0()
21+
_setInheritAttrs(["innerHTML"])
22+
_renderEffect(() => _setAttr(n0, "innerHTML", _ctx.foo))
1123
return n0
1224
}"
1325
`;
@@ -19,7 +31,43 @@ const t0 = _template("<div></div>")
1931
export function render(_ctx) {
2032
const n0 = t0()
2133
_setInheritAttrs(["foo-bar"])
22-
_renderEffect(() => _setAttr(n0, "foo-bar", _ctx.fooBar, true))
34+
_renderEffect(() => _setAttr(n0, "foo-bar", _ctx.fooBar))
35+
return n0
36+
}"
37+
`;
38+
39+
exports[`compiler v-bind > .attr modifier w/ progress value 1`] = `
40+
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setAttr as _setAttr, template as _template } from 'vue/vapor';
41+
const t0 = _template("<progress></progress>")
42+
43+
export function render(_ctx) {
44+
const n0 = t0()
45+
_setInheritAttrs(["value"])
46+
_renderEffect(() => _setAttr(n0, "value", _ctx.foo))
47+
return n0
48+
}"
49+
`;
50+
51+
exports[`compiler v-bind > .attr modifier w/ textContent 1`] = `
52+
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setAttr as _setAttr, template as _template } from 'vue/vapor';
53+
const t0 = _template("<div></div>")
54+
55+
export function render(_ctx) {
56+
const n0 = t0()
57+
_setInheritAttrs(["textContent"])
58+
_renderEffect(() => _setAttr(n0, "textContent", _ctx.foo))
59+
return n0
60+
}"
61+
`;
62+
63+
exports[`compiler v-bind > .attr modifier w/ value 1`] = `
64+
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setAttr as _setAttr, template as _template } from 'vue/vapor';
65+
const t0 = _template("<div></div>")
66+
67+
export function render(_ctx) {
68+
const n0 = t0()
69+
_setInheritAttrs(["value"])
70+
_renderEffect(() => _setAttr(n0, "value", _ctx.foo))
2371
return n0
2472
}"
2573
`;
@@ -31,7 +79,7 @@ const t0 = _template("<div></div>")
3179
export function render(_ctx) {
3280
const n0 = t0()
3381
_setInheritAttrs(["fooBar"])
34-
_renderEffect(() => _setDynamicProp(n0, "fooBar", _ctx.id, true))
82+
_renderEffect(() => _setDynamicProp(n0, "fooBar", _ctx.id))
3583
return n0
3684
}"
3785
`;
@@ -56,31 +104,79 @@ const t0 = _template("<div></div>")
56104
export function render(_ctx) {
57105
const n0 = t0()
58106
_setInheritAttrs(["fooBar"])
59-
_renderEffect(() => _setDynamicProp(n0, "fooBar", _ctx.fooBar, true))
107+
_renderEffect(() => _setDynamicProp(n0, "fooBar", _ctx.fooBar))
60108
return n0
61109
}"
62110
`;
63111

64-
exports[`compiler v-bind > .prop modifier (shortband) w/ no expression 1`] = `
112+
exports[`compiler v-bind > .prop modifier (shorthand) 1`] = `
65113
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setDOMProp as _setDOMProp, template as _template } from 'vue/vapor';
66114
const t0 = _template("<div></div>")
67115
68116
export function render(_ctx) {
69117
const n0 = t0()
70118
_setInheritAttrs(["fooBar"])
71-
_renderEffect(() => _setDOMProp(n0, "fooBar", _ctx.fooBar, true))
119+
_renderEffect(() => _setDOMProp(n0, "fooBar", _ctx.id))
72120
return n0
73121
}"
74122
`;
75123

76-
exports[`compiler v-bind > .prop modifier (shorthand) 1`] = `
124+
exports[`compiler v-bind > .prop modifier (shorthand) w/ innerHTML 1`] = `
125+
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setHtml as _setHtml, template as _template } from 'vue/vapor';
126+
const t0 = _template("<div></div>")
127+
128+
export function render(_ctx) {
129+
const n0 = t0()
130+
_setInheritAttrs(["innerHTML"])
131+
_renderEffect(() => _setHtml(n0, _ctx.foo))
132+
return n0
133+
}"
134+
`;
135+
136+
exports[`compiler v-bind > .prop modifier (shorthand) w/ no expression 1`] = `
77137
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setDOMProp as _setDOMProp, template as _template } from 'vue/vapor';
78138
const t0 = _template("<div></div>")
79139
80140
export function render(_ctx) {
81141
const n0 = t0()
82142
_setInheritAttrs(["fooBar"])
83-
_renderEffect(() => _setDOMProp(n0, "fooBar", _ctx.id, true))
143+
_renderEffect(() => _setDOMProp(n0, "fooBar", _ctx.fooBar))
144+
return n0
145+
}"
146+
`;
147+
148+
exports[`compiler v-bind > .prop modifier (shorthand) w/ progress value 1`] = `
149+
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setDOMProp as _setDOMProp, template as _template } from 'vue/vapor';
150+
const t0 = _template("<progress></progress>")
151+
152+
export function render(_ctx) {
153+
const n0 = t0()
154+
_setInheritAttrs(["value"])
155+
_renderEffect(() => _setDOMProp(n0, "value", _ctx.foo))
156+
return n0
157+
}"
158+
`;
159+
160+
exports[`compiler v-bind > .prop modifier (shorthand) w/ textContent 1`] = `
161+
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setText as _setText, template as _template } from 'vue/vapor';
162+
const t0 = _template("<div></div>")
163+
164+
export function render(_ctx) {
165+
const n0 = t0()
166+
_setInheritAttrs(["textContent"])
167+
_renderEffect(() => _setText(n0, _ctx.foo))
168+
return n0
169+
}"
170+
`;
171+
172+
exports[`compiler v-bind > .prop modifier (shorthand) w/ value 1`] = `
173+
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setValue as _setValue, template as _template } from 'vue/vapor';
174+
const t0 = _template("<div></div>")
175+
176+
export function render(_ctx) {
177+
const n0 = t0()
178+
_setInheritAttrs(["value"])
179+
_renderEffect(() => _setValue(n0, _ctx.foo))
84180
return n0
85181
}"
86182
`;
@@ -92,7 +188,7 @@ const t0 = _template("<div></div>")
92188
export function render(_ctx) {
93189
const n0 = t0()
94190
_setInheritAttrs(["fooBar"])
95-
_renderEffect(() => _setDOMProp(n0, "fooBar", _ctx.id, true))
191+
_renderEffect(() => _setDOMProp(n0, "fooBar", _ctx.id))
96192
return n0
97193
}"
98194
`;
@@ -109,14 +205,110 @@ export function render(_ctx) {
109205
}"
110206
`;
111207

208+
exports[`compiler v-bind > .prop modifier w/ innerHTML 1`] = `
209+
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setHtml as _setHtml, template as _template } from 'vue/vapor';
210+
const t0 = _template("<div></div>")
211+
212+
export function render(_ctx) {
213+
const n0 = t0()
214+
_setInheritAttrs(["innerHTML"])
215+
_renderEffect(() => _setHtml(n0, _ctx.foo))
216+
return n0
217+
}"
218+
`;
219+
112220
exports[`compiler v-bind > .prop modifier w/ no expression 1`] = `
113221
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setDOMProp as _setDOMProp, template as _template } from 'vue/vapor';
114222
const t0 = _template("<div></div>")
115223
116224
export function render(_ctx) {
117225
const n0 = t0()
118226
_setInheritAttrs(["fooBar"])
119-
_renderEffect(() => _setDOMProp(n0, "fooBar", _ctx.fooBar, true))
227+
_renderEffect(() => _setDOMProp(n0, "fooBar", _ctx.fooBar))
228+
return n0
229+
}"
230+
`;
231+
232+
exports[`compiler v-bind > .prop modifier w/ progress value 1`] = `
233+
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setDOMProp as _setDOMProp, template as _template } from 'vue/vapor';
234+
const t0 = _template("<progress></progress>")
235+
236+
export function render(_ctx) {
237+
const n0 = t0()
238+
_setInheritAttrs(["value"])
239+
_renderEffect(() => _setDOMProp(n0, "value", _ctx.foo))
240+
return n0
241+
}"
242+
`;
243+
244+
exports[`compiler v-bind > .prop modifier w/ textContent 1`] = `
245+
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setText as _setText, template as _template } from 'vue/vapor';
246+
const t0 = _template("<div></div>")
247+
248+
export function render(_ctx) {
249+
const n0 = t0()
250+
_setInheritAttrs(["textContent"])
251+
_renderEffect(() => _setText(n0, _ctx.foo))
252+
return n0
253+
}"
254+
`;
255+
256+
exports[`compiler v-bind > .prop modifier w/ value 1`] = `
257+
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setValue as _setValue, template as _template } from 'vue/vapor';
258+
const t0 = _template("<div></div>")
259+
260+
export function render(_ctx) {
261+
const n0 = t0()
262+
_setInheritAttrs(["value"])
263+
_renderEffect(() => _setValue(n0, _ctx.foo))
264+
return n0
265+
}"
266+
`;
267+
268+
exports[`compiler v-bind > :innerHTML 1`] = `
269+
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setHtml as _setHtml, template as _template } from 'vue/vapor';
270+
const t0 = _template("<div></div>")
271+
272+
export function render(_ctx) {
273+
const n0 = t0()
274+
_setInheritAttrs(["innerHTML"])
275+
_renderEffect(() => _setHtml(n0, _ctx.foo))
276+
return n0
277+
}"
278+
`;
279+
280+
exports[`compiler v-bind > :textContext 1`] = `
281+
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setText as _setText, template as _template } from 'vue/vapor';
282+
const t0 = _template("<div></div>")
283+
284+
export function render(_ctx) {
285+
const n0 = t0()
286+
_setInheritAttrs(["textContent"])
287+
_renderEffect(() => _setText(n0, _ctx.foo))
288+
return n0
289+
}"
290+
`;
291+
292+
exports[`compiler v-bind > :value 1`] = `
293+
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setValue as _setValue, template as _template } from 'vue/vapor';
294+
const t0 = _template("<input>")
295+
296+
export function render(_ctx) {
297+
const n0 = t0()
298+
_setInheritAttrs(["value"])
299+
_renderEffect(() => _setValue(n0, _ctx.foo))
300+
return n0
301+
}"
302+
`;
303+
304+
exports[`compiler v-bind > :value w/ progress 1`] = `
305+
"import { setInheritAttrs as _setInheritAttrs, renderEffect as _renderEffect, setDynamicProp as _setDynamicProp, template as _template } from 'vue/vapor';
306+
const t0 = _template("<progress></progress>")
307+
308+
export function render(_ctx) {
309+
const n0 = t0()
310+
_setInheritAttrs(["value"])
311+
_renderEffect(() => _setDynamicProp(n0, "value", _ctx.foo))
120312
return n0
121313
}"
122314
`;
@@ -128,11 +320,11 @@ const t0 = _template("<div></div>")
128320
export function render(_ctx) {
129321
const n0 = t0()
130322
_setInheritAttrs(["id", "title", "lang", "dir", "tabindex"])
131-
_renderEffect(() => _setDOMProp(n0, "id", _ctx.id, true))
132-
_renderEffect(() => _setDOMProp(n0, "title", _ctx.title, true))
133-
_renderEffect(() => _setDOMProp(n0, "lang", _ctx.lang, true))
134-
_renderEffect(() => _setDOMProp(n0, "dir", _ctx.dir, true))
135-
_renderEffect(() => _setDOMProp(n0, "tabindex", _ctx.tabindex, true))
323+
_renderEffect(() => _setDOMProp(n0, "id", _ctx.id))
324+
_renderEffect(() => _setDOMProp(n0, "title", _ctx.title))
325+
_renderEffect(() => _setDOMProp(n0, "lang", _ctx.lang))
326+
_renderEffect(() => _setDOMProp(n0, "dir", _ctx.dir))
327+
_renderEffect(() => _setDOMProp(n0, "tabindex", _ctx.tabindex))
136328
return n0
137329
}"
138330
`;
@@ -144,11 +336,11 @@ const t0 = _template("<math></math>")
144336
export function render(_ctx) {
145337
const n0 = t0()
146338
_setInheritAttrs(["autofucus", "dir", "displaystyle", "mathcolor", "tabindex"])
147-
_renderEffect(() => _setDOMProp(n0, "autofucus", _ctx.autofucus, true))
148-
_renderEffect(() => _setDOMProp(n0, "dir", _ctx.dir, true))
149-
_renderEffect(() => _setDOMProp(n0, "displaystyle", _ctx.displaystyle, true))
150-
_renderEffect(() => _setDOMProp(n0, "mathcolor", _ctx.mathcolor, true))
151-
_renderEffect(() => _setDOMProp(n0, "tabindex", _ctx.tabindex, true))
339+
_renderEffect(() => _setDOMProp(n0, "autofucus", _ctx.autofucus))
340+
_renderEffect(() => _setDOMProp(n0, "dir", _ctx.dir))
341+
_renderEffect(() => _setDOMProp(n0, "displaystyle", _ctx.displaystyle))
342+
_renderEffect(() => _setDOMProp(n0, "mathcolor", _ctx.mathcolor))
343+
_renderEffect(() => _setDOMProp(n0, "tabindex", _ctx.tabindex))
152344
return n0
153345
}"
154346
`;
@@ -160,9 +352,9 @@ const t0 = _template("<svg></svg>")
160352
export function render(_ctx) {
161353
const n0 = t0()
162354
_setInheritAttrs(["id", "lang", "tabindex"])
163-
_renderEffect(() => _setDOMProp(n0, "id", _ctx.id, true))
164-
_renderEffect(() => _setDOMProp(n0, "lang", _ctx.lang, true))
165-
_renderEffect(() => _setDOMProp(n0, "tabindex", _ctx.tabindex, true))
355+
_renderEffect(() => _setDOMProp(n0, "id", _ctx.id))
356+
_renderEffect(() => _setDOMProp(n0, "lang", _ctx.lang))
357+
_renderEffect(() => _setDOMProp(n0, "tabindex", _ctx.tabindex))
166358
return n0
167359
}"
168360
`;
@@ -214,7 +406,7 @@ const t0 = _template("<div></div>")
214406
export function render(_ctx) {
215407
const n0 = t0()
216408
_setInheritAttrs(["id"])
217-
_renderEffect(() => _setDOMProp(n0, "id", _ctx.id, true))
409+
_renderEffect(() => _setDOMProp(n0, "id", _ctx.id))
218410
return n0
219411
}"
220412
`;
@@ -250,7 +442,7 @@ const t0 = _template("<div></div>")
250442
export function render(_ctx) {
251443
const n0 = t0()
252444
_setInheritAttrs(["camel-case"])
253-
_renderEffect(() => _setDynamicProp(n0, "camel-case", _ctx.camelCase, true))
445+
_renderEffect(() => _setDynamicProp(n0, "camel-case", _ctx.camelCase))
254446
return n0
255447
}"
256448
`;
@@ -262,7 +454,7 @@ const t0 = _template("<div></div>")
262454
export function render(_ctx) {
263455
const n0 = t0()
264456
_setInheritAttrs(["id"])
265-
_renderEffect(() => _setDOMProp(n0, "id", _ctx.id, true))
457+
_renderEffect(() => _setDOMProp(n0, "id", _ctx.id))
266458
return n0
267459
}"
268460
`;

‎packages/compiler-vapor/__tests__/transforms/__snapshots__/vFor.spec.ts.snap‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,8 +52,8 @@ export function render(_ctx) {
5252
const n0 = _createFor(() => (_ctx.items), (_ctx0) => {
5353
const n2 = t0()
5454
_setInheritAttrs(["item", "index"])
55-
_renderEffect(() => _setDynamicProp(n2, "item", _ctx0[0].value, true))
56-
_renderEffect(() => _setDynamicProp(n2, "index", _ctx0[1].value, true))
55+
_renderEffect(() => _setDynamicProp(n2, "item", _ctx0[0].value))
56+
_renderEffect(() => _setDynamicProp(n2, "index", _ctx0[1].value))
5757
return n2
5858
})
5959
return n0

‎packages/compiler-vapor/__tests__/transforms/__snapshots__/vOnce.spec.ts.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const t0 = _template("<div></div>")
66
77
export function render(_ctx) {
88
const n0 = t0()
9-
_setDOMProp(n0, "id", _ctx.foo, true)
9+
_setDOMProp(n0, "id", _ctx.foo)
1010
_setInheritAttrs(["id"])
1111
return n0
1212
}"

0 commit comments

Comments
 (0)