fix(useVModel): unified value (#1568)

Author: okxiaoliang4

packages/core/useVModel/index.test.ts

@@ -105,32 +105,54 @@ describe('useVModel', () => {
   })
 
   it('should work with user define defaultValue', () => {
-    const props = {
+    const props: Record<string, unknown> = {
       ...defaultProps(),
-      data: undefined as string | undefined,
       a: 0,
       b: '',
       c: false,
+      d: null,
+      e: undefined,
     }
     const emitMock = vitest.fn()
 
     const data = useVModel(props, 'data', emitMock, { defaultValue: 'default-data' })
-    const dataA = useVModel(props, 'a', emitMock)
-    const dataB = useVModel(props, 'b', emitMock)
-    const dataC = useVModel(props, 'c', emitMock)
+    const dataA = useVModel(props, 'a', emitMock, { defaultValue: 'default-data' })
+    const dataB = useVModel(props, 'b', emitMock, { defaultValue: 'default-data' })
+    const dataC = useVModel(props, 'c', emitMock, { defaultValue: 'default-data' })
+    const dataD = useVModel(props, 'd', emitMock, { defaultValue: 'default-data' })
+    const dataE = useVModel(props, 'e', emitMock, { defaultValue: 'default-data' })
 
     expect(data.value).toBe('default-data')
     expect(dataA.value).toBe(0)
     expect(dataB.value).toBe('')
     expect(dataC.value).toBe(false)
+    expect(dataD.value).toBe(null)
+    expect(dataE.value).toBe('default-data')
   })
 
   it('should work with user define defaultValue with passive', () => {
-    const props = {
+    const props: Record<string, unknown> = {
       ...defaultProps(),
+      a: 0,
+      b: '',
+      c: false,
+      d: null as string | null,
+      e: undefined as string | undefined,
     }
     const emitMock = vitest.fn()
-    const data = useVModel(props, 'data', emitMock, { passive: true, defaultValue: 'default-data' })
+
+    const data = useVModel(props, 'data', emitMock, { defaultValue: 'default-data', passive: true })
+    const dataA = useVModel(props, 'a', emitMock, { defaultValue: 'default-data', passive: true })
+    const dataB = useVModel(props, 'b', emitMock, { defaultValue: 'default-data', passive: true })
+    const dataC = useVModel(props, 'c', emitMock, { defaultValue: 'default-data', passive: true })
+    const dataD = useVModel(props, 'd', emitMock, { defaultValue: 'default-data', passive: true })
+    const dataE = useVModel(props, 'e', emitMock, { defaultValue: 'default-data', passive: true })
+
     expect(data.value).toBe('default-data')
+    expect(dataA.value).toBe(0)
+    expect(dataB.value).toBe('')
+    expect(dataC.value).toBe(false)
+    expect(dataD.value).toBe(null)
+    expect(dataE.value).toBe('default-data')
   })
 })

packages/core/useVModel/index.ts

@@ -70,8 +70,10 @@ export function useVModel<P extends object, K extends keyof P, Name extends stri
 
   event = eventName || event || `update:${key}`
 
+  const getValue = () => isDef(props[key!]) ? props[key!] : defaultValue
+
   if (passive) {
-    const proxy = ref<P[K]>(props[key!] ?? defaultValue!)
+    const proxy = ref<P[K]>(getValue()!)
 
     watch(() => props[key!], v => proxy.value = v as UnwrapRef<P[K]>)
 
@@ -87,7 +89,7 @@ export function useVModel<P extends object, K extends keyof P, Name extends stri
   else {
     return computed<P[K]>({
       get() {
-        return isDef(props[key!]) ? props[key!] : defaultValue!
+        return getValue()!
       },
       set(value) {
         _emit(event, value)