Skip to content

Commit 9eef37f

Browse files
yyx990803yyx990803
committed
refactor(compiler): remove modelValue from generated code for native v-model
1 parent 3b2d236 commit 9eef37f

File tree

3 files changed

+34
-35
lines changed

3 files changed

+34
-35
lines changed

‎packages/compiler-dom/__tests__/transforms/__snapshots__/vModel.spec.ts.snap‎

Lines changed: 12 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,8 @@ return function render(_ctx, _cache) {
88
const { vModelDynamic: _vModelDynamic, mergeProps: _mergeProps, createVNode: _createVNode, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue
99
1010
return _withDirectives((_openBlock(), _createBlock(\\"input\\", _mergeProps(obj, {
11-
modelValue: model,
1211
\\"onUpdate:modelValue\\": $event => (model = $event)
13-
}), null, 16 /* FULL_PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"])), [
12+
}), null, 16 /* FULL_PROPS */, [\\"onUpdate:modelValue\\"])), [
1413
[_vModelDynamic, model]
1514
])
1615
}
@@ -27,9 +26,8 @@ return function render(_ctx, _cache) {
2726
const _directive_bind = _resolveDirective(\\"bind\\")
2827
2928
return _withDirectives((_openBlock(), _createBlock(\\"input\\", {
30-
modelValue: model,
3129
\\"onUpdate:modelValue\\": $event => (model = $event)
32-
}, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"])), [
30+
}, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
3331
[_directive_bind, val, key],
3432
[_vModelDynamic, model]
3533
])
@@ -45,9 +43,8 @@ return function render(_ctx, _cache) {
4543
const { vModelText: _vModelText, createVNode: _createVNode, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue
4644
4745
return _withDirectives((_openBlock(), _createBlock(\\"input\\", {
48-
modelValue: model,
4946
\\"onUpdate:modelValue\\": $event => (model = $event)
50-
}, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"])), [
47+
}, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
5148
[
5249
_vModelText,
5350
model,
@@ -67,9 +64,8 @@ return function render(_ctx, _cache) {
6764
const { vModelText: _vModelText, createVNode: _createVNode, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue
6865
6966
return _withDirectives((_openBlock(), _createBlock(\\"input\\", {
70-
modelValue: model,
7167
\\"onUpdate:modelValue\\": $event => (model = $event)
72-
}, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"])), [
68+
}, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
7369
[
7470
_vModelText,
7571
model,
@@ -89,9 +85,8 @@ return function render(_ctx, _cache) {
8985
const { vModelText: _vModelText, createVNode: _createVNode, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue
9086
9187
return _withDirectives((_openBlock(), _createBlock(\\"input\\", {
92-
modelValue: model,
9388
\\"onUpdate:modelValue\\": $event => (model = $event)
94-
}, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"])), [
89+
}, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
9590
[
9691
_vModelText,
9792
model,
@@ -111,9 +106,8 @@ return function render(_ctx, _cache) {
111106
const { vModelText: _vModelText, createVNode: _createVNode, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue
112107
113108
return _withDirectives((_openBlock(), _createBlock(\\"input\\", {
114-
modelValue: model,
115109
\\"onUpdate:modelValue\\": $event => (model = $event)
116-
}, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"])), [
110+
}, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
117111
[_vModelText, model]
118112
])
119113
}
@@ -129,9 +123,8 @@ return function render(_ctx, _cache) {
129123
130124
return _withDirectives((_openBlock(), _createBlock(\\"input\\", {
131125
type: \\"checkbox\\",
132-
modelValue: model,
133126
\\"onUpdate:modelValue\\": $event => (model = $event)
134-
}, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"])), [
127+
}, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
135128
[_vModelCheckbox, model]
136129
])
137130
}
@@ -148,9 +141,8 @@ return function render(_ctx, _cache) {
148141
const _directive_bind = _resolveDirective(\\"bind\\")
149142
150143
return _withDirectives((_openBlock(), _createBlock(\\"input\\", {
151-
modelValue: model,
152144
\\"onUpdate:modelValue\\": $event => (model = $event)
153-
}, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"])), [
145+
}, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
154146
[_directive_bind, foo, \\"type\\"],
155147
[_vModelDynamic, model]
156148
])
@@ -167,9 +159,8 @@ return function render(_ctx, _cache) {
167159
168160
return _withDirectives((_openBlock(), _createBlock(\\"input\\", {
169161
type: \\"radio\\",
170-
modelValue: model,
171162
\\"onUpdate:modelValue\\": $event => (model = $event)
172-
}, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"])), [
163+
}, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
173164
[_vModelRadio, model]
174165
])
175166
}
@@ -185,9 +176,8 @@ return function render(_ctx, _cache) {
185176
186177
return _withDirectives((_openBlock(), _createBlock(\\"input\\", {
187178
type: \\"text\\",
188-
modelValue: model,
189179
\\"onUpdate:modelValue\\": $event => (model = $event)
190-
}, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"])), [
180+
}, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
191181
[_vModelText, model]
192182
])
193183
}
@@ -202,9 +192,8 @@ return function render(_ctx, _cache) {
202192
const { vModelSelect: _vModelSelect, createVNode: _createVNode, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue
203193
204194
return _withDirectives((_openBlock(), _createBlock(\\"select\\", {
205-
modelValue: model,
206195
\\"onUpdate:modelValue\\": $event => (model = $event)
207-
}, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"])), [
196+
}, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
208197
[_vModelSelect, model]
209198
])
210199
}
@@ -219,9 +208,8 @@ return function render(_ctx, _cache) {
219208
const { vModelText: _vModelText, createVNode: _createVNode, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue
220209
221210
return _withDirectives((_openBlock(), _createBlock(\\"textarea\\", {
222-
modelValue: model,
223211
\\"onUpdate:modelValue\\": $event => (model = $event)
224-
}, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"])), [
212+
}, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
225213
[_vModelText, model]
226214
])
227215
}

‎packages/compiler-dom/src/transforms/vModel.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -104,5 +104,17 @@ export const transformModel: DirectiveTransform = (dir, node, context) => {
104104
)
105105
}
106106

107+
// native vmodel doesn't need the `modelValue` props since they are also
108+
// passed to the runtime as `binding.value`. removing it reduces code size.
109+
baseResult.props = baseResult.props.filter(p => {
110+
if (
111+
p.key.type === NodeTypes.SIMPLE_EXPRESSION &&
112+
p.key.content === 'modelValue'
113+
) {
114+
return false
115+
}
116+
return true
117+
})
118+
107119
return baseResult
108120
}

‎packages/runtime-dom/src/patchProp.ts‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -25,19 +25,18 @@ export const patchProp: RendererOptions<Node, Element>['patchProp'] = (
2525
case 'style':
2626
patchStyle(el, prevValue, nextValue)
2727
break
28-
case 'modelValue':
29-
case 'onUpdate:modelValue':
30-
// Do nothing. This is handled by v-model directives.
31-
break
3228
default:
3329
if (isOn(key)) {
34-
patchEvent(
35-
el,
36-
key.slice(2).toLowerCase(),
37-
prevValue,
38-
nextValue,
39-
parentComponent
40-
)
30+
// ignore v-model listeners
31+
if (key.indexOf('onUpdate:') < 0) {
32+
patchEvent(
33+
el,
34+
key.slice(2).toLowerCase(),
35+
prevValue,
36+
nextValue,
37+
parentComponent
38+
)
39+
}
4140
} else if (!isSVG && key in el) {
4241
patchDOMProp(
4342
el,

0 commit comments

Comments
 (0)