fix(v-model): avoid mutation when using Set models + fix multi select Set model update

Author: yyx990803

packages/runtime-dom/__tests__/directives/vModel.spec.ts

@@ -884,18 +884,21 @@ describe('vModel', () => {
     foo.selected = true
     triggerEvent('change', input)
     await nextTick()
+    expect(data.value).toBeInstanceOf(Set)
     expect(data.value).toMatchObject(new Set(['foo']))
 
     foo.selected = false
     bar.selected = true
     triggerEvent('change', input)
     await nextTick()
+    expect(data.value).toBeInstanceOf(Set)
     expect(data.value).toMatchObject(new Set(['bar']))
 
     foo.selected = true
     bar.selected = true
     triggerEvent('change', input)
     await nextTick()
+    expect(data.value).toBeInstanceOf(Set)
     expect(data.value).toMatchObject(new Set(['foo', 'bar']))
 
     foo.selected = false

packages/runtime-dom/src/directives/vModel.ts

@@ -118,11 +118,13 @@ export const vModelCheckbox: ModelDirective<HTMLInputElement> = {
           assign(filtered)
         }
       } else if (isSet(modelValue)) {
+        const cloned = new Set(modelValue)
         if (checked) {
-          modelValue.add(elementValue)
+          cloned.add(elementValue)
         } else {
-          modelValue.delete(elementValue)
+          cloned.delete(elementValue)
         }
+        assign(cloned)
       } else {
         assign(getCheckboxValue(el, checked))
       }
@@ -168,15 +170,22 @@ export const vModelRadio: ModelDirective<HTMLInputElement> = {
 }
 
 export const vModelSelect: ModelDirective<HTMLSelectElement> = {
-  created(el, { modifiers: { number } }, vnode) {
+  created(el, { value, modifiers: { number } }, vnode) {
+    const isSetModel = isSet(value)
     addEventListener(el, 'change', () => {
       const selectedVal = Array.prototype.filter
         .call(el.options, (o: HTMLOptionElement) => o.selected)
         .map(
           (o: HTMLOptionElement) =>
             number ? toNumber(getValue(o)) : getValue(o)
         )
-      el._assign(el.multiple ? selectedVal : selectedVal[0])
+      el._assign(
+        el.multiple
+          ? isSetModel
+            ? new Set(selectedVal)
+            : selectedVal
+          : selectedVal[0]
+      )
     })
     el._assign = getModelAssigner(vnode)
   },