refactor(compiler): remove modelValue from generated code for native v-model

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 f82b2b4bf290f2bb84ee00b43fe107407569819b..67aaa19bffd4f1d317aea51c7425143a551bb118 100644 (file)
--- 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 e82ad780f19fec846144faa2ea60a1ee3fb7c71a..693bfcceada7c5ef748f2ceaba139e9775d948e7 100644 (file)
--- 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 5799a13b1febcba04d01dbd54f0a466d1b413e52..a0e9e04227d955a428da073d946a024030b283fb 100644 (file)
--- a/packages/runtime-dom/src/patchProp.ts
+++ b/packages/runtime-dom/src/patchProp.ts
@@ -25,19 +25,18 @@ export const patchProp: RendererOptions<Node, Element>['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,