From 9eef37fa32b8883763840d36ba4a7758b645f3c2 Mon Sep 17 00:00:00 2001 From: Evan You Date: Mon, 16 Mar 2020 17:51:56 -0400 Subject: [PATCH] refactor(compiler): remove modelValue from generated code for native v-model --- .../__snapshots__/vModel.spec.ts.snap | 36 +++++++------------ .../compiler-dom/src/transforms/vModel.ts | 12 +++++++ packages/runtime-dom/src/patchProp.ts | 21 ++++++----- 3 files changed, 34 insertions(+), 35 deletions(-) diff --git a/packages/compiler-dom/__tests__/transforms/__snapshots__/vModel.spec.ts.snap b/packages/compiler-dom/__tests__/transforms/__snapshots__/vModel.spec.ts.snap index f82b2b4bf29..67aaa19bffd 100644 --- a/packages/compiler-dom/__tests__/transforms/__snapshots__/vModel.spec.ts.snap +++ b/packages/compiler-dom/__tests__/transforms/__snapshots__/vModel.spec.ts.snap @@ -8,9 +8,8 @@ return function render(_ctx, _cache) { const { vModelDynamic: _vModelDynamic, mergeProps: _mergeProps, createVNode: _createVNode, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue return _withDirectives((_openBlock(), _createBlock(\\"input\\", _mergeProps(obj, { - modelValue: model, \\"onUpdate:modelValue\\": $event => (model = $event) - }), null, 16 /* FULL_PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"])), [ + }), null, 16 /* FULL_PROPS */, [\\"onUpdate:modelValue\\"])), [ [_vModelDynamic, model] ]) } @@ -27,9 +26,8 @@ return function render(_ctx, _cache) { const _directive_bind = _resolveDirective(\\"bind\\") return _withDirectives((_openBlock(), _createBlock(\\"input\\", { - modelValue: model, \\"onUpdate:modelValue\\": $event => (model = $event) - }, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"])), [ + }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [ [_directive_bind, val, key], [_vModelDynamic, model] ]) @@ -45,9 +43,8 @@ return function render(_ctx, _cache) { const { vModelText: _vModelText, createVNode: _createVNode, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue return _withDirectives((_openBlock(), _createBlock(\\"input\\", { - modelValue: model, \\"onUpdate:modelValue\\": $event => (model = $event) - }, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"])), [ + }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [ [ _vModelText, model, @@ -67,9 +64,8 @@ return function render(_ctx, _cache) { const { vModelText: _vModelText, createVNode: _createVNode, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue return _withDirectives((_openBlock(), _createBlock(\\"input\\", { - modelValue: model, \\"onUpdate:modelValue\\": $event => (model = $event) - }, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"])), [ + }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [ [ _vModelText, model, @@ -89,9 +85,8 @@ return function render(_ctx, _cache) { const { vModelText: _vModelText, createVNode: _createVNode, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue return _withDirectives((_openBlock(), _createBlock(\\"input\\", { - modelValue: model, \\"onUpdate:modelValue\\": $event => (model = $event) - }, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"])), [ + }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [ [ _vModelText, model, @@ -111,9 +106,8 @@ return function render(_ctx, _cache) { const { vModelText: _vModelText, createVNode: _createVNode, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue return _withDirectives((_openBlock(), _createBlock(\\"input\\", { - modelValue: model, \\"onUpdate:modelValue\\": $event => (model = $event) - }, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"])), [ + }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [ [_vModelText, model] ]) } @@ -129,9 +123,8 @@ return function render(_ctx, _cache) { return _withDirectives((_openBlock(), _createBlock(\\"input\\", { type: \\"checkbox\\", - modelValue: model, \\"onUpdate:modelValue\\": $event => (model = $event) - }, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"])), [ + }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [ [_vModelCheckbox, model] ]) } @@ -148,9 +141,8 @@ return function render(_ctx, _cache) { const _directive_bind = _resolveDirective(\\"bind\\") return _withDirectives((_openBlock(), _createBlock(\\"input\\", { - modelValue: model, \\"onUpdate:modelValue\\": $event => (model = $event) - }, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"])), [ + }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [ [_directive_bind, foo, \\"type\\"], [_vModelDynamic, model] ]) @@ -167,9 +159,8 @@ return function render(_ctx, _cache) { return _withDirectives((_openBlock(), _createBlock(\\"input\\", { type: \\"radio\\", - modelValue: model, \\"onUpdate:modelValue\\": $event => (model = $event) - }, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"])), [ + }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [ [_vModelRadio, model] ]) } @@ -185,9 +176,8 @@ return function render(_ctx, _cache) { return _withDirectives((_openBlock(), _createBlock(\\"input\\", { type: \\"text\\", - modelValue: model, \\"onUpdate:modelValue\\": $event => (model = $event) - }, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"])), [ + }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [ [_vModelText, model] ]) } @@ -202,9 +192,8 @@ return function render(_ctx, _cache) { const { vModelSelect: _vModelSelect, createVNode: _createVNode, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue return _withDirectives((_openBlock(), _createBlock(\\"select\\", { - modelValue: model, \\"onUpdate:modelValue\\": $event => (model = $event) - }, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"])), [ + }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [ [_vModelSelect, model] ]) } @@ -219,9 +208,8 @@ return function render(_ctx, _cache) { const { vModelText: _vModelText, createVNode: _createVNode, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue return _withDirectives((_openBlock(), _createBlock(\\"textarea\\", { - modelValue: model, \\"onUpdate:modelValue\\": $event => (model = $event) - }, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"])), [ + }, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [ [_vModelText, model] ]) } diff --git a/packages/compiler-dom/src/transforms/vModel.ts b/packages/compiler-dom/src/transforms/vModel.ts index e82ad780f19..693bfcceada 100644 --- a/packages/compiler-dom/src/transforms/vModel.ts +++ b/packages/compiler-dom/src/transforms/vModel.ts @@ -104,5 +104,17 @@ export const transformModel: DirectiveTransform = (dir, node, context) => { ) } + // native vmodel doesn't need the `modelValue` props since they are also + // passed to the runtime as `binding.value`. removing it reduces code size. + baseResult.props = baseResult.props.filter(p => { + if ( + p.key.type === NodeTypes.SIMPLE_EXPRESSION && + p.key.content === 'modelValue' + ) { + return false + } + return true + }) + return baseResult } diff --git a/packages/runtime-dom/src/patchProp.ts b/packages/runtime-dom/src/patchProp.ts index 5799a13b1fe..a0e9e04227d 100644 --- a/packages/runtime-dom/src/patchProp.ts +++ b/packages/runtime-dom/src/patchProp.ts @@ -25,19 +25,18 @@ export const patchProp: RendererOptions['patchProp'] = ( case 'style': patchStyle(el, prevValue, nextValue) break - case 'modelValue': - case 'onUpdate:modelValue': - // Do nothing. This is handled by v-model directives. - break default: if (isOn(key)) { - patchEvent( - el, - key.slice(2).toLowerCase(), - prevValue, - nextValue, - parentComponent - ) + // ignore v-model listeners + if (key.indexOf('onUpdate:') < 0) { + patchEvent( + el, + key.slice(2).toLowerCase(), + prevValue, + nextValue, + parentComponent + ) + } } else if (!isSVG && key in el) { patchDOMProp( el,